Reactstrap Input component that autosizes to fit its contents when used with type="textarea".
Install with npm:
npm install reactstrap-elasticinput
Or with yarn:
yarn add reactstrap-elasticinput
You can use ElasticInput anywhere you would use an Input, however its elastic autosizing only works if the type of the input is passed as "textarea" (the default if no type is passed to EkasticInput)
import { ElasticInput } from 'reactstrap-elasticinput';
<ElasticInput type="textarea" name="..." value="..." />
import { ElasticInput } from 'reactstrap-elasticinput';
<ElasticInput type="textarea" name="..." value="..." />
You can pass any of Input's props to ElasticInput and they will be passed through to the wrapped Input.
All ElasticInput components have a CSS class of "elastic" attached to them (via their className prop).
You can use this in CSS to do things such as set a maximum height for example.
textarea.elastic {
max-height: 200px;
transition: ease 0.4s;
}
The elastic size of the componet is always set using the style={{ height: [size]px }} prop and updated each time the user inputs into the component.
This package is written in typescript and comes with its own bindings.
Licensed under the MIT license.