Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edloidas/autoresize
Automatically resize the inputs
https://github.com/edloidas/autoresize
autoresize input performance textarea zero-dependency
Last synced: 25 days ago
JSON representation
Automatically resize the inputs
- Host: GitHub
- URL: https://github.com/edloidas/autoresize
- Owner: edloidas
- License: mit
- Created: 2018-03-21T18:41:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-03-24T09:47:57.000Z (over 6 years ago)
- Last Synced: 2024-10-01T20:09:17.832Z (about 1 month ago)
- Topics: autoresize, input, performance, textarea, zero-dependency
- Language: JavaScript
- Size: 84 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
autoresize
==========
> Automatically resize inputs. High performance. Zero dependencies.
## Examples
You can try [TextArea](http://edloidas.github.io/autoresize/examples/textarea.html) or [Input](http://edloidas.github.io/autoresize/examples/input.html) examples in your browser.
__Note:__ _Autoresize of the `` element is **not yet implemented**._
## Install
#### Node
```
npm i autoresize
```
Then in your project require it:
```js
const autoresize = require('autoresize');
```
Or use ES import:
```js
import autoresize from 'autoresize';
```
#### Browser
__Note:__ _You will have access to the global `autoresize` function, that will be added to the `window` object._
```html
```
Minified version:
```html
```
ES5 version:
```html
```
Minified ES5 version:
```html
```
## Usage
```js
const element = document.querySelector('#textarea');
const options = { maximumRows: 5, assumeRendered: true };
// Enable autoresize by adding specific listeners
const disable = autoresize(element, options);
// Remove all listeners and disable autoresize
disable();
```
### Paramenters
##### `element`
An HTML element of types: `HTMLTextAreaElement` or `HTMLInputElement`.
##### `options`
An options object, that is different for each element type.
__TextArea__
```js
{
minimumRows: 1,
maximumRows: Infinity,
rowHeight: null,
assumeRendered: false
}
```
Passing the `rowHeight` value may be a bit more performant solution, but it will mean that the `lineSize` is guarantee to be unchanged in future with JS or CSS (including some `@media` queries). Otherwise, `rowHeight` will be calculated on the initial step and recalculated on window `'resize'` event.
Passing the `assumeRendered` with `true` value will skip the check for the presence of the element in the DOM. Otherwise, the `render()` function will wait, until the element is rendered and then will apply the event listeners.
__Input__
```js
{
maxWidth: null,
assumeRendered: false
}
```
## License
[MIT](LICENSE) © [Mikita Taukachou](https://edloidas.com)