How to use React Bootstrap Counter

React Bootstrap Counter demo

I built react-bootstrap-counter for facilitating the use of counter input in ReactJs projects , let’s take a look how you can too use it in your project.

It is available in npm registry so install it using

npm install — save react-bootstrap-counter

react-bootstrap-counter uses bootstrap and font-awesome for styling so don’t forget to include them.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Now import the component.

Import CounterInput from ‘react-bootstrap-counter’;

Inside your jsx

<CounterInput max={10} min={5} onChange={ (value) => { console.log(value) } } value={5} />

There are 4 types of props.

1. max

You can pass the maximum value allowed for the counter input. The input value will not gets updated if user try to enter value greater than max value.

2. min

Like Max, The Min prop do the exact opposite thing a user cannot enter a value less than the Min value.

3. onChange

Whenever the value gets updated either by clicking Increment , Decrement or by directly entering the value onChange function will get fired with the newly updated value.

For example

<CounterInput onChange={ ( value ) => { console.log( value ) } } />

This piece of code output the updated value every time the input value gets updated.

4. value

You can also pass you own initialValue to the CounterInput component which will be set as the value of the input upon initialization.

So this is it if you want to improve this React component or have ideas feel free to fork me on github.