https://github.com/lemmon/custom-textarea
Web Components custom-textarea element.
https://github.com/lemmon/custom-textarea
autogrow custom-elements html textarea web-components
Last synced: 2 months ago
JSON representation
Web Components custom-textarea element.
- Host: GitHub
- URL: https://github.com/lemmon/custom-textarea
- Owner: lemmon
- License: mit
- Created: 2019-12-10T10:23:21.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-03T15:26:12.000Z (about 4 years ago)
- Last Synced: 2025-03-18T04:33:23.075Z (2 months ago)
- Topics: autogrow, custom-elements, html, textarea, web-components
- Language: HTML
- Homepage: https://www.lemmonjuice.com/custom-textarea/
- Size: 45.9 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
Web Components custom-textarea element.
Reason behind this component is to create a plain unstyled autogrowing textarea.
[Demo](https://www.lemmonjuice.com/custom-textarea/)
## Install
```sh
npm i @lemmon/custom-textarea
```
or reference directly:
```html
```
### Usage
```js
// does register the component for you
// with `custom-textarea` tagname
import '@lemmon/custom-textarea'
```
or
```js
// does not register the component,
// useful when you want to extend the component
// or to chose a different tag name
import Textarea from '@lemmon/custom-textarea/textarea'
class TextareaUpgraded extends Textarea {}
customElements.define('upgraded-textarea', TextareaUpgraded)
```
### Use With The CDN
```html
<script type="module" src="https://unpkg.com/@lemmon/custom-textarea">
```
## Example
```html
Hello World!
```
You can apply your own styles. Fonts, colors, line-height, and padding are inherited. Placeholder styles can be defined using CSS variables.
```css
custom-textarea {
--placeholder-color: orange; /* default: inherit */
--placeholder-opacity: 1; /* default: 0.5 */
}
```
## License
MIT