Open In App

How to add AutoSize Input in React.js ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:


Last Updated : 20 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads