React 18 Bootstrap 5 Auto Resize Textarea Example Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

Textarea is a text entry box, mainly a form control element used to gather multi-line text in HTML.

Textarea height remains stable after reaching a certain extent; however, we can make its height auto-resizable.

We will show you how to create auto-size Textarea in React. We will use a functional component with useState, useEffect, and useRef hooks to add the auto-resize or auto-height in the Textarea UI component.

The auto-resize Textarea in React can hold any amount of text and fits its height based on the text size.

We’ll use the useRef hook to access the DOM property; based on the text quantity, call the custom function to set the text area state or size.

The useEffect hook invokes every time a component renders; by using the same mechanism, we will set the text area height.

Let’s find out the process of creating auto-resize Textarea in React.

Install New React App

We need a new React app to show you how to build the feature and thus run the command to form a new React app.

Make sure to get inside the project folder after the app is installed.

npx create-react-app react-blog

cd react-blog

Add Bootstrap Library

We are going to install the bootstrap library; this package will drastically reduce our time when it comes to styling the UI components.

Make sure to run the provided command:

npm install bootstrap --legacy-peer-deps

Make New Component

Get inside the React project there you need to create the components/ folder and make sure to form the Home.js file with the given code.

import React from 'react'

function Home() {
  return (
    <div></div>
  )
}

export default Home

Build Auto Size Textarea

To formulate the auto-size textarea, create the components/Home.js file then import the hooks and the custom function as given below.

import React from "react";

const Home = () => {
  const textRef = React.useRef();

  const [value, setValue] = React.useState();

  const onChnage = (event) => {
    setValue(event.target.value);
  };

  React.useEffect(() => {
    if (textRef && textRef.current) {
      textRef.current.style.height = "0px";
      const taHeight = textRef.current.scrollHeight;
      textRef.current.style.height = taHeight + "px";
    }
  }, [value]);

  return (
    <div>
      <h2>React Textarea Auto Size Example</h2>
      <textarea className="form-control" ref={textRef} onChange={onChnage}>
        {value}
      </textarea>
    </div>
  );
};

export default Home;

Update Global Component

Head over to App.js file; this is the main component which serves the React app.

We have to register the component we created for auto-resize textarea component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Home from "./components/Home";

function App() {
  return (
    <div className="container mt-3">
      <Home />
    </div>
  );
}

export default App;

Run React Server

Move on to the terminal, type the npm start command and run the command.

npm start

Open the browser on the address bar type the given url and hit enter to view the app.

http://localhost:3000