react-bootstrap-input-spinner

An input number spinner based on Bootstrap for React.

Set min and max values, use increase and decrease buttons, type value directly into the input, and set Bootstrap element properties.

This project is based on React Native Input Spinner by Marco Cesarato. Click here to check out his Github.

Install

$ npm install react-bootstrap-input-spinner

Usage

import InputSpinner from 'react-bootstrap-input-spinner'  
  
<InputSpinner
    type={'real'}
    precision={2}
    max={1.2}
    min={0}
    step={0.01}
    value={value}
    onChange={num=>console.log(num)}
    variant={'dark'}
    size="sm"
/>

Run example

Make sure you have a recent version of Node.js installed in your development environment.

Cloning Repository

$ git clone https://github.com/rodrigues-t/react-bootstrap-input-spinner.git

Installing all dependencies (library and playground)

$ cd react-bootstrap-input-spinner && npm run i-all

Runinng for test

$ npm run dev

Props List

Property	Description	type	Default
arrows	Optional Set if labels on right and left buttons will be < and > instead of - and +	boolean	false
disabled	Optional Set if component is disabled	boolean	false
editable	Optional Set if input number field is editable	boolean	true
max	maximum value permitted	number	Number.MAX_SAFE_INTEGER
min	minimum value permitted	number	0
precision	Maximum numbers after comma	number
size	Optional Bootstrap element size. sm or lg	any	undefined
step	Value to increment or decrement the spinner value	number
type	Type of the spinner. int or real/float/double/decimal	string
value	Value of the spinner	number
variant	Optional React Bootstrap variants	string	primary

Handlers

Handler	Description
onChange	Callback called when value changes	(num: number)=>void
onMax	Optional Callback called when max value is reached	(num: number)=>void
onMin	Optional Callback called when min value is reached	(num: number)=>void
onIncrease	Optional Callback called when increase button is hitted	(num: number)=>void
onDecrease	Optional Callback called when decrease button is hitted	(num: number)=>void

Contribute

If you want to contribute to this project, please read this.