How to use React Bootstrap Counter – Medium

  • The input value will not gets updated if user try to enter value greater than max value.
  • This piece of code output the updated value every time the input value gets updated.
  • 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.
  • Solving people problems using code spells.
  • Like Max, The Min prop do the exact opposite thing a user cannot enter a value less than the Min value.

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…

@manojnegiwd: How to use React Bootstrap Counter @ReactJS_News #reactjs #javascript #bootstrap

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

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

Now import the component.

Import CounterInput from ‘react-bootstrap-counter’;

Inside your jsx

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

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.

How to use React Bootstrap Counter – Medium