react-bootstrap-input-spinner
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.2
    332
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.2
    332
  • 1.0.1
    0

Package Sidebar

Install

npm i react-bootstrap-input-spinner

Weekly Downloads

332

Version

1.0.2

License

GPL-3.0-or-later

Unpacked Size

71.5 kB

Total Files

7

Last publish

Collaborators

  • rodrigues-t