1.2.4 • Published 1 year ago
react-text-auto-resize v1.2.4
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)}
/>
);
}