Open In App

How to use TextareaAutosize Component in ReactJS?

Last Updated : 16 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

A textarea component for React that grows with content on Input. Material UI for React has this component available for us, and it is very easy to integrate. We can use the TextareaAutosize Component in ReactJS using the following approach.

Prerequisites:

Approach:

To use TextareaAutosize Component in React JS we will first install the React Material UI package from the NPM. Then import the TextareaAutosize with available props and custom styling in the app.js file.

Steps to Create React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm i @material-ui/core

Project Structure:

Project Structure

The updated dependencies in the package.json file.

"dependencies": {
"@material-ui/core": "^4.12.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-tabs": "^6.0.2",
"web-vitals": "^2.1.4"
},

Example: This example uses MUI TextareaAutosize to implement the automatic resizable textarea in react.

Javascript




// Filename - App.js
 
import React from "react";
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 
export default function App() {
    return (
        <div
            style={{
                display: "block",
                padding: 30,
                width: 500,
            }}
        >
            <h4>
                How to use TextareaAutosize Component in
                ReactJS?
            </h4>
            <TextareaAutosize
                style={{ width: 150 }}
                placeholder="Enter your text here!"
            />
        </div>
    );
}


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start


Output: Now open your browser and go to http://localhost:3000/, you will see the following output.



Similar Reads

When to use a Class Component over a Function Component in ReactJS ?
Introduction: Components are the building blocks of creating user interfaces in React. They allow us to develop re-usable and independent bits of inter-linked components which together form the whole web interface. React has 2 different types of components: Syntax: Class Component - The components created using the ES2015 class template are known a
3 min read
How to convert functional component to class component in ReactJS ?
ReactJS offers two primary ways of creating components: functional components and class components. While functional components are more concise and easier to reason about, there are situations where class components may be necessary with the flexibility to use lifecycle methods and manage the state in a different way. PrerequisitesReact JSReact Fu
2 min read
How to pass data from one component to other component in ReactJS ?
In React, passing data from one component to another component is a common task. It helps build a dynamic and interactive web application. We can pass data in components from parent to child, child to parent, and between siblings as shown below. Table of ContentPassing data from Parent to ChildPassing data from Child to Parent ComponentPassing data
5 min read
How to use useMediaQuery Component in ReactJS ?
The useMediaQuery Component is a CSS media query hook for React. Using this functionality, we can write our own CSS media query for which this function looks for a match, and it renders if the query matches. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to u
2 min read
How to use Container Component in ReactJS?
The container centers your content horizontally. It's the most basic layout element. Material UI for React has this component available for us and it is very easy to integrate. We can use the Container component in ReactJS using the following approach. Creating React Application And Installing Module: Step 1: Create a React application using the fo
2 min read
How to use Hidden Component in ReactJS?
Hidden component quickly and responsively toggles the visibility value of components and more with the hidden utilities. Material UI for React has this component available for us and it is very easy to integrate. We can use the Hidden component in ReactJS using the following approach. Creating React Application And Installing Module: Step 1: Create
2 min read
How to use ButtonGroup Component in ReactJS?
The ButtonGroup component can be used to group related buttons. Material UI for React has this component available for us and it is very easy to integrate. We can use ButtonGroup Component in ReactJS using the following approach: Creating React Application And Installing Module: Step 1: Create a React application using the following command: npx cr
2 min read
How to use Paper Component in ReactJS ?
In Material Design, the physical properties of paper are translated to the screen. Material UI for React has this component available for us and it is very easy to integrate. We can use the Paper Component in ReactJS using the following approach. Creating React Application And Installing Module: Step 1: Create a React application using the followin
2 min read
How to use Pagination Component in ReactJS ?
Pagination is a feature through which users can easily switch between pages across a website or app. With the help of this component, a user can select a specific page from a range of pages. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use the Pagination
2 min read
How to use SpeedDial Component in ReactJS ?
SpeedDial is a quick action button for the user from where the user can click over it and easily access the various option provided in the dial. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use SpeedDial Component. Creating React Application And Installi
2 min read