rbp

react-bootstrap-personalized-counter

A counter input component for react using bootstrap

Showing:

Popularity

Downloads/wk

14

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

2

Size (min+gzip)

9.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Bootstrap Counter

A counter input component for react using bootstrap

alt tag

react-bootstrap-counter uses bootstrap and font-awesome for styling so don't forget to include them. You can inlude your own glyph if you do not want to use the default plus and minus from Awsome font-awesome

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/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">

Installation

npm install react-bootstrap-personalized-counter --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import CounterInput from 'react-bootstrap-personalized-counter';
ReactDOM.render(<CounterInput value={2} min={1} max={50} glyphPlus={{glyph:'fa fa-plus', position:'left'}} glyphMinus={{glyph:'fa fa-minus', position:'right'}} onChange={ (value) => { console.log(value) } } />, document.getElementById('page'));

Props

value

Initial value of the input default is 0.

<CounterInput value="1" />

max

Maximum range input value can go default is infinite.

<CounterInput max={40} />

min

Maximum range input value can go default is 0.

<CounterInput min={10} />

glyph

Set the position and the glyph displayed.

<CounterInput glyphPlus={{glyph:'fa fa-plus', position:'left'}} glyphMinus={{glyph:'fa fa-minus', position:'right'}} />

glyphPlus

Set the plus glyph, the glyph and the position. The minus one is not required, the default one is 'fa fa-minus' and the position is the opposite position.

<CounterInput glyphPlus={{glyph:'fa fa-plus', position:'left'}} />

glyphMinus

Set the minus glyph, the glyph and the position. The plus one is not required, the default one is 'fa fa-plus' and the position is the opposite position.

<CounterInput glyphMinus={{glyph:'fa fa-minus', position:'right'}} />

onChange

Get called whenever input field value gets changed returns input value as a argument.

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

Customize look and feel

The main parent div is consist of a class .counter-input with this you can style its children because react-bootstrap-counter uses bootstrap you can customize it fairly easily

/* to style input use */
.counter-input .form-control {
    /* your style */
}
/* to style buttons use */
.counter-input .input-group-addon {
     /* your style */
}

Using this component then please star this component and feel free to contribute.

About Me

this project is forked from:

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial