react-char-counter

A lightweight, reusable React component to display live character count for input or textarea elements. Supports minimum and maximum character limits, remaining characters display, and optional warnings when close to the max.

Perfect for form validation, comment boxes, or any text input field.

Features

• Show live character count
• Support min and max character limits
• Show remaining characters (optional)
• Highlight when close to max with warningAt
• Stops typing if max limit is reached
• Works with any input or textarea
• Tiny and easy to integrate

Installation

npm install react-char-counter

Usage

import React from 'react';
import CharacterCounter from 'react-char-counter';

function App() {
  return (
    <div>
      <CharacterCounter min={5} max={20}>
        <textarea placeholder="Type here..." />
      </CharacterCounter>
    </div>
  );
}

Show Remaining Characters:

<CharacterCounter min={5} max={20} showRemaining>
  <input placeholder="Type here..." />
</CharacterCounter>

Show Warning close to the max: (here when 3 characters left it shows warning text)

<CharacterCounter max={10} warningAt={3} showRemaining>
  <textarea placeholder="Type something..." >
</CharacterCounter>

License

MIT © [GladsonRouth]