https://github.com/rodrigues-t/react-bootstrap-input-spinner
An input number spinner based on Bootstrap
https://github.com/rodrigues-t/react-bootstrap-input-spinner
bootstrap input-spinner number react react-bootstrap
Last synced: over 1 year ago
JSON representation
An input number spinner based on Bootstrap
- Host: GitHub
- URL: https://github.com/rodrigues-t/react-bootstrap-input-spinner
- Owner: rodrigues-t
- License: gpl-3.0
- Created: 2021-01-21T20:06:11.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-11-07T16:21:55.000Z (over 4 years ago)
- Last Synced: 2023-12-26T10:37:27.008Z (over 2 years ago)
- Topics: bootstrap, input-spinner, number, react, react-bootstrap
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-bootstrap-input-spinner
- Size: 662 KB
- Stars: 2
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/marcocesarato/react-native-input-spinner) to check out his Github.
## Install
```
$ npm install react-bootstrap-input-spinner
```
## Usage
```javascript
import InputSpinner from 'react-bootstrap-input-spinner'
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 to initialize 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](DEV.md).