AutoResizable Textarea Control in React as User Types using react-textarea-autosize

In this React tutorial, we’ll learn how to add auto resizable textarea form controls by using a jQuery inspired react-textarea-autosize package for React applications.

A TextArea Form controls are used to type long texts by the user. It can have a custom height and width which can be adjusted by developers in the application.

But sometimes users feel annoyed to see extra text going out of view, to resolve this there was a nice jquery plugin. Using this plugin the size of TextArea can be automatically resized in height as user types.

This makes the whole text visible once making textarea control look cool and user friendly.

This jQuery plugin is adapted for React application to provide a spacial component. Here we’ll learn how to easily implement this feature in a React application.

[lwptoc]

Create a React Application

First, we’ll create a new React application using npx create-react-app command

$ npx create-react-app react-autoresizable-textarea-app

Move inside the react app

$ cd react-autoresizable-textarea-app

Run application

$ npm start

Install `react-textarea-autosize` Package

After creating the React application ready, install the react-textarea-autosize package by running below npm command

$ npm install react-textarea-autosize

Adding Auto Resizable Textarea

In the App.js function component, import the TextareaAutosize class and simply add the component inside the JSX template as shown below:

// App.js
import React, { useState } from 'react';
import './App.css';
import TextareaAutosize from 'react-textarea-autosize';

function App() {

  return (
    <div className="App">

      <h4>Auto Resizable TextArea Control</h4>

      <div>
        <TextareaAutosize />
      </div>

    </div >
  );
}

export default App;

That’s it, now run the app by hitting $ npm start and see it working with magic.

Properties and Methods

The <TextareaAutosize /> component support following properties and methods:

value : Current textarea value
onChange() : Callback on value change
onHeightChange() : Callback on height change
rows : Minimal number of rows to show.
minRows : Alias for `rows`.
maxRows : Maximum number of rows to show.

Using Properties and Methods

We can define state to set and get values, also we have defined methods to return values on the <TextareaAutosize /> component as shown below:

// App.js
import React, { useState } from 'react';
import './App.css';
import TextareaAutosize from 'react-textarea-autosize';

function App() {

  const [value, setValue] = useState('Sample Text');

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

  const onHeightChangeEvent = (height) => {
    console.log('height', height);
  }

  return (
    <div className="App">

      <h4>Auto Resizable TextArea Control</h4>

      <div>
        <TextareaAutosize
          value={value}
          rows={5}
          maxRows={10}
          onChange={onChangeEvent}
          onHeightChange={onHeightChangeEvent} />
      </div>

      <span>{value}</span>


    </div >
  );
}

export default App;

Conclusion

This package is of very small size approx 1.3kb so it ba used easily with current textarea control to add cool features.

Category: npm-package