https://github.com/berkayturkmen/react-text-auto-resize
Dynamic growing textarea component for React
https://github.com/berkayturkmen/react-text-auto-resize
autoresize react reactjs text text-autoresize textarea textarea-autoresize
Last synced: 2 months ago
JSON representation
Dynamic growing textarea component for React
- Host: GitHub
- URL: https://github.com/berkayturkmen/react-text-auto-resize
- Owner: berkayturkmen
- Created: 2022-05-04T06:22:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-10T08:43:20.000Z (about 3 years ago)
- Last Synced: 2025-02-20T10:17:47.179Z (3 months ago)
- Topics: autoresize, react, reactjs, text, text-autoresize, textarea, textarea-autoresize
- Language: JavaScript
- Homepage:
- Size: 272 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-text-auto-resize
Dynamic growing textarea component for React js
### Installation
```
$ npm i react-text-auto-resize
```
### Usage
```jsx
import React, { useState } from 'react';
import TextAutoResize from 'react-text-auto-resize';
function App(){
const [value, setValue] = useState("");
return (
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
```jsx
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 (
handleKeyPress(e)}
onChange={(e) => setValue(e)}
/>
);
}
```