React-bootstrap-input-spinner NPM

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.

react-component react reactjs spinner number input bootstrap bootstrap-component react-bootstrap

bootstrap react-bootstrap

@infinitebrahmanuniverse/nolb-react-bo @everything-registry/sub-chunk-2542 @zalastax/nolb-react-bo

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago