react-text-auto-resize

Dynamic growing textarea component for React js

Installation

$ npm i react-text-auto-resize

Usage

1import React, { useState } from 'react';
2import TextAutoResize from 'react-text-auto-resize';
3  
4function App(){
5	const [value, setValue] = useState("");
6	return (
7		<TextAutoResize onChange={(e) => setValue(e)} />
8	);
9}

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

1import React, { useState } from 'react';
2import TextAutoResize from 'react-text-auto-resize';
3  
4function App(){
5	const [value, setValue] = useState("");
6
7	const handleKeyPress = (e) => {
8		if (e.key === "Enter" && e.shiftKey) {
9			console.log("Pressed shift + enter");
10		}
11	};
12
13	return (
14		<TextAutoResize
15			minRows={2}
16			maxRows={8}
17			className="form-control" 
18			style={{ border: '2px solid #222', padding: '5px' }}
19			placeholeder={"hello world"}
20			disabled={false}
21			onKeyUp={(e) => handleKeyPress(e)}
22			onChange={(e) => setValue(e)} 
23		/>
24	);
25  }