react-textarea-count

Simple textarea chars counter for React

Installation

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:

<Textarea />

and output:

<div class="textarea__wrapper">
	<textarea />
	<span class="textarea__count">0</span>
</div>

If you want to show a limit then you have to pass a countLimit prop so it can become visible:

<Textarea countLimit={10} />

and output:

<div class="textarea__wrapper">
	<textarea />
	<span class="textarea__count">0/10</span>
</div>

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:

<div class="textarea__wrapper">
	<textarea />
	<span class="textarea__count textarea__count--error">11/10</span>
</div>

If you want to hide the counter in a specific case you can use prop countShow and set it to false:

<Textarea countLimit={10} countShow={...somelogic here} />

and output:

<div class="textarea__wrapper">
	<textarea />
</div>

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