Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fregante/fit-textarea
Automatically expand a <textarea> to fit its content, in a few bytes
https://github.com/fregante/fit-textarea
Last synced: about 2 months ago
JSON representation
Automatically expand a <textarea> to fit its content, in a few bytes
- Host: GitHub
- URL: https://github.com/fregante/fit-textarea
- Owner: fregante
- License: mit
- Created: 2019-03-14T05:49:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-12T19:58:22.000Z (over 3 years ago)
- Last Synced: 2024-07-11T21:39:55.211Z (2 months ago)
- Language: TypeScript
- Homepage: https://npmjs.com/fit-textarea
- Size: 35.2 KB
- Stars: 78
- Watchers: 3
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# fit-textarea [![][badge-gzip]](#link-npm)
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/fit-textarea.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/fit-textarea
> Automatically expand a `` to fit its content, in a few bytes
Try the [demo](https://fregante.github.io/fit-textarea/)!
Features:
- Small
- No layout thrashing (no DOM changes unless necessary)
- You can set a minimum height (via `rows` attribute or `height` CSS property)
- If the field is resizable, the new size will be treated as minimum height
## Install
```
npm install fit-textarea
```
## Setup
```js
// This module is only offered as a ES Module
import fitTextarea from 'fit-textarea';
```
```html
Use the rows attribute to set its minimum height
```
## Usage
### Once, one element
```js
const textarea = document.querySelector('textarea');
fitTextarea(textarea);
```
### As the user types
#### One element
```js
const textarea = document.querySelector('textarea');
fitTextarea.watch(textarea);
```
#### Array/NodeList/Iterable of elements
```js
const textareas = document.querySelectorAll('textarea');
fitTextarea.watch(textareas);
```
#### With a selector
The selector is run once, so it's equivalent to the example above.
```js
fitTextarea.watch('textarea');
```
# Related
- [indent-textarea](https://github.com/fregante/indent-textarea) - Add editor-like tab-to-indent functionality to , in a few bytes.
- [delegate-it](https://github.com/fregante/delegate-it) - DOM event delegation, in <1KB. Can be used to attach one `fit-textarea` to many elements.
- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module.