react-textarea-counter
Basic textarea character counter React component.
Installation
npm i react-textarea-counter --saveUsage
import React from 'react';
import TextareaCounter from 'react-textarea-counter';
export default function MyComponent() {
return <TextareaCounter countLimit={25} initialValue="Hello World!" />;
}Props
| Property | Type | Default | Description |
|---|---|---|---|
showCount |
bool |
true |
If you want to show the counter or to hide it. |
countLimit |
number |
25 |
The max number of characters on the counter. |
countDirection |
string |
asc |
If it should count from the countLimit to zero set to desc otherwise set it to asc. |
countPosition |
string |
right |
Position of the counter on the bottom of the textarea. |
shouldTruncate |
string |
true |
If you want to allow the user to insert more characters than the countLimit set to false. |
initialValue |
string |
The default initial value on the textarea element. | |
rows |
number |
6 |
The number of rows of the textarea element. |
resize |
string |
vertical |
Resize attribute of the textarea element. Can be none, both, horizontal or vertical. |
placeholder |
string |
Placeholder of the textarea element. | |
onChange |
func |
Callback function on the onChange event. |
|
onFocus |
func |
Callback function on the onFocus event. |
|
onBlur |
func |
Callback function on the onBlur event. |
|
required |
bool |
false |
Required attribute of the textarea element. |
disabled |
bool |
false |
Disabled attribute of the textarea element. |
License
Open source under the terms of the MIT License.
Made by Diogo Capela.