/react-text-auto-resize

Dynamic growing textarea component for React

Primary LanguageJavaScript

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