Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
org.webjars.npm:react-input-autosize
Advanced tools
A text input for React that resizes itself to the current content.
Live demo: jedwatson.github.io/react-input-autosize
To run the examples locally, run:
npm install
npm start
Then open localhost:8000 in a browser.
The easiest way to use React-Input-Autosize is to install it from NPM and include it in your own React build process (using Browserify, rollup, webpack, etc).
You can also use the umd build by including dist/AutosizeInput.js
in your page. If you use this, make sure you have already included a umd React build.
npm install react-input-autosize --save
React-Input-Autosize generates an input field, wrapped in a <div>
tag so it can detect the size of its value. Otherwise it behaves very similarly to a standard React input.
import AutosizeInput from 'react-input-autosize';
<AutosizeInput
name="form-field-name"
value={inputValue}
onChange={function(event) {
// event.target.value contains the new value
}}
/>
The styles applied to the input are only copied when the component mounts. Because of this, subsequent changes to the stylesheet may cause size to be detected incorrectly.
To work around this, either re-mount the input (e.g. by providing a different key
prop) or call the copyInputStyles()
method after the styles change.
The input will automatically inject a stylesheet that hides IE/Edge's "clear" indicator, which otherwise breaks the UI. This has the downside of being incompatible with some CSP policies.
To work around this, you can pass the injectStyles={false}
prop, but if you do this I strongly recommend targeting the input
element in your own stylesheet with the following rule:
input::-ms-clear {display: none;}
If your input uses custom font sizes, you will need to provide the custom size to AutosizeInput
.
<AutosizeInput
name="form-field-name"
value={inputValue}
inputStyle={{ fontSize: 36 }}
onChange={function(event) {
// event.target.value contains the new value
}}
/>
AutosizeInput
is a controlled input and depends on the value
prop to work as intended. It does not support being used as an uncontrolled input.
Copyright (c) 2018 Jed Watson. MIT License.
FAQs
WebJar for react-input-autosize
We found that org.webjars.npm:react-input-autosize demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.