https://github.com/fakiolinho/react-textarea-count
Simple textarea chars counter for React
https://github.com/fakiolinho/react-textarea-count
counter es6 reactjs textarea
Last synced: about 1 year ago
JSON representation
Simple textarea chars counter for React
- Host: GitHub
- URL: https://github.com/fakiolinho/react-textarea-count
- Owner: fakiolinho
- Created: 2017-03-23T16:22:13.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-13T21:50:58.000Z (over 7 years ago)
- Last Synced: 2025-04-09T00:38:25.722Z (about 1 year ago)
- Topics: counter, es6, reactjs, textarea
- Language: JavaScript
- Size: 17.6 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-textarea-count
 [](https://coveralls.io/github/fakiolinho/react-textarea-count?branch=master)
Simple textarea chars counter for React
## Installation
```bash
npm i react-textarea-count -S
```
## Usage Example
This is a dead simple plugin to count textareas length with ease. By default a textarea is rendered wrapped inside a `.textarea__wrapper` container. Inside of this resides the textarea itself and a span element with class `.textarea__count ` with the text's length:
```jsx
```
and output:
```html
0
```
If you want to show a limit then you have to pass a `countLimit` prop so it can become visible:
```jsx
```
and output:
```html
0/10
```
Since `countLimit` is passed then everytime the length is bigger than that limit a `textarea__count--error` class is applied to the counter. That way you can style it at while:
```html
11/10
```
If you want to hide the counter in a specific case you can use prop `countShow` and set it to false:
```jsx
```
and output:
```html
```
## API
### Props
Property | Type | Default | Description
:-----------------------|:-----------------------------|:--------------|:--------------------------------
`countLimit` | `number` | `0` | Chars limit. It is optional and if it is not used then chars limit is not shown
`countShow ` | `bool` | `true` | Just in case you want to hide the counter you can set this to `false`
## License
This project is licensed under the MIT License