How to add AutoSize Input in React.js ?

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:

• Nodejs and NPM
• React JS

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.

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: