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)} 
		/>
	);
  }