In this article, 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. It is maintained by Facebook and a community of individual developers and companies.
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 in our app. So first, we will install the react-input-autosize package and then we will add a autosize input on our homepage.
Create ReactJs Application: You can create a new ReactJs project using the below command:
npx create-react-app gfg
Install the required package: Now we will install the react-input-autosize package using the below command:
npm i react-input-autosize
Project Structure: It will look like this.
Adding the AutoSize Input: After installing the package we can easily add a autosize input on any page in our app. For this example, we are going to add a autosize input to our homepage.
Add the below content in the App.js file:
Javascript
import React, { useState } from 'react'; import AutosizeInput from 'react-input-autosize'; export default function GfgInput() { const [inputValue, setInput] = useState(""); return ( <div> <h2>neveropen ReactJs - AutoSize Input</h2> <AutosizeInput name="form-field-name" value={inputValue} onChange={function(event) { setInput(event.target.value) }} /> </div> ); } |
Explanation: In the above example first, 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.
Steps to run the application: Run the below command in the terminal to run the app.
npm start
Output:
