How to add AutoSize Input in React.js ?
Last Updated :
20 Nov, 2023
We are going to learn how we can add AutoSize input in ReactJs. React is a free and open-source front-end JavaScript library for building user interfaces or UI components.
Prerequisites:
Approach:
To add our autosize input we are going to use the react-input-autosize package. The react-input-autosize package helps us to integrate the autosize input into our app. So first, we will install the react-input-autosize package and then we will add an autosize input on our homepage.
Steps to Create React Application:
Step1: Create ReactJs Application:
npx create-react-app gfg
Step 2: move to the project directory
cd gfg
Step 3: Install the required package
npm i react-input-autosize
Project Structure:
The updated dependecies in package.json file will look like:
"dependencies": {
"react-input-autosize": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: In the example, we are importing the AutosizeInput component and useState hook from react. Then we are using the useState hook to store the value of the input. After that, we are adding our input using the installed package.
Javascript
import React, { useState } from 'react' ;
import AutosizeInput from 'react-input-autosize' ;
export default function GfgInput() {
const [inputValue, setInput] = useState( "" );
return (
<div>
<h2>GeeksforGeeks ReactJs - AutoSize Input</h2>
<AutosizeInput
name= "form-field-name"
value={inputValue}
onChange={ function (event) {
setInput(event.target.value)
}}
/>
</div>
);
}
|
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
Share your thoughts in the comments
Please Login to comment...