https://github.com/fakhir-shad/react-character-counter
A React Wrapper Component to display character counts against Controlled input elements
https://github.com/fakhir-shad/react-character-counter
bootstrap bootstrap-character-counter component controlled-input react react-character-counter
Last synced: 10 months ago
JSON representation
A React Wrapper Component to display character counts against Controlled input elements
- Host: GitHub
- URL: https://github.com/fakhir-shad/react-character-counter
- Owner: fakhir-shad
- License: mit
- Created: 2019-03-25T11:02:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-26T07:14:46.000Z (about 7 years ago)
- Last Synced: 2025-06-28T08:51:52.983Z (11 months ago)
- Topics: bootstrap, bootstrap-character-counter, component, controlled-input, react, react-character-counter
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-character-counter
## Installation
### Package Manager
#### NPM
```
npm install react-character-counter --save
```
### Basic Usage
This Component only works for controlled inputs
```
import CharacterCounter from 'react-character-counter'
state = {
name: ''
}
```
#### Accepted Props are below
```
{
value: String, Required
maxLength: Number, Required
wrapperStyle: Object, Optional
characterCounterStyle: Object, Optional
overrideStyle: Boolean, Optional
}
```
#### Adding more styles can be done as
```
```
#### Overriding existing Styling and positioning all together can be done as
```
```
#### Default Styling is listed below
##### Wrapper Style
```
{
position: "relative"
}
```
##### Character Counter Style
```
{
position: "absolute",
fontSize: "12px",
fontWeight: "600"
}
```