Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-text-auto-resize

berkayt16MIT1.2.4

Dynamic growing textarea component for React

auto resize, auto, resize, autosize, grow, react, react-component, textarea, text

readme

react-text-auto-resize

Dynamic growing textarea component for React js

Installation

$ npm i react-text-auto-resize

Usage

import React, { useState } from 'react';
import TextAutoResize from 'react-text-auto-resize';

function App(){
    const [value, setValue] = useState("");
    return (
        <TextAutoResize onChange={(e) => setValue(e)} />
    );
}

Special props:

prop type description default value
minRows number Minimum number of rows to show for textarea 2
maxRows number Maximum number of rows up to which the textarea can grow 5
className string additional class name of textarea
style string style properties of textarea { border: '2px solid #222' }
placeholeder string Sets placeholder
disabled boolean Sets disabled
onKeyUp func Triggers the onKeyUp event
onChange func Triggers the onChange event

Custom

import React, { useState } from 'react';
import TextAutoResize from 'react-text-auto-resize';

function App(){
    const [value, setValue] = useState("");

    const handleKeyPress = (e) => {
        if (e.key === "Enter" && e.shiftKey) {
            console.log("Pressed shift + enter");
        }
    };

    return (
        <TextAutoResize
            minRows={2}
            maxRows={8}
            className="form-control" 
            style={{ border: '2px solid #222', padding: '5px' }}
            placeholeder={"hello world"}
            disabled={false}
            onKeyUp={(e) => handleKeyPress(e)}
            onChange={(e) => setValue(e)} 
        />
    );
  }