Site icon RemoteStack

How to Build Auto-Resize Textarea in React with Bootstrap

Textarea is an essential form element that helps add multi-line text to the input control. A text area can carry an unlimited number of characters. However, the textarea height remains fixed after adding the text resulting in scrolling back to the top to read the text.

In this tutorial, we’ll learn how to create an auto-resize Textarea that changes its height based on the content size. To create an Autosize Textarea, we take the help of useState, use effect, and useRef hooks.

The useRef Hook allows you to persist values between renders. However, we’ll use it to access the DOM element and set the dynamic height of the textarea.

To auto-resize the textarea to fit or accommodate the content. We’ll create a custom function and bind it to the onChange event handler; call the onChange event listener every time user enters the text in the textarea.

Create React Project

If you haven’t created a React app, make sure to execute the given command to to install a new React app.

npx create-react-app my-react-app

Thereafter, move into the app folder.

cd my-react-app

Install Bootstrap Module

Bootstrap is going to help us style the form element within no time! You can add it to your project by running the given command.

npm i bootstrap

Create Component File

Let us make a new file, move into the src/ directory, next create features/Profile.js folder and file.

import React from 'react'

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

export default Profile

Create Auto-resize Textarea in React

Next, you have to add the given code into the features/Profile.js file to build the functionality.

import React, { useState, useEffect, useRef } from "react";

const Profile = () => {
  const elRef = useRef();

  const [textareaVal, setTextareaVal] = useState();

  const onValChnage = (e) => {
    setTextareaVal(e.target.value);
  };

  useEffect(() => {
    if (elRef && elRef.current) {
      elRef.current.style.height = "0px";
      const textareaHeight = elRef.current.scrollHeight;
      elRef.current.style.height = textareaHeight + "px";
    }
  }, [textareaVal]);

  return (
    <div>
      <h2 className="mb-3">React Textarea Auto-resize Example</h2>
      <textarea className="form-control" ref={elRef} onChange={onValChnage}>
        {textareaVal}
      </textarea>
    </div>
  );
};

export default Profile;

Update App Js Component

Now, we are done with building the component, next thing is to go to the App.js file and register the Profile component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Profile from "./features/Profile";

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

export default App;

View App on Browser

We are ready to view the app on the browser, run the suggested command and invoke the React app.

npm start

If you are creating locally then open the app with the suggested url.

http://localhost:3000

Conclusion

In this React textarea autosize example, we learned how to fit auto-growing text in a Textarea by taking the help of the useRef Hook.

Exit mobile version