# react-input-spinner-event

> An input number spinner based on Bootstrap.

Latest version **1.0.0** (published 2023-10-25) · GPL-3.0-or-later license · 0 weekly downloads

## Install

```sh
npm install react-input-spinner-event
pnpm add react-input-spinner-event
yarn add react-input-spinner-event
bun add react-input-spinner-event
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-10-25 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | GPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Thiago Rodrigues |
| Maintainers | luisgvillarreal |
| Keywords | react-component, react, reactjs, spinner, number, input, bootstrap, bootstrap-component, react-bootstrap |

## Links

- npm: https://www.npmjs.com/package/react-input-spinner-event
- Repository: https://github.com/LuisGVillarreal/react-bootstrap-input-spinner
- Homepage: https://github.com/rodrigues-t/react-bootstrap-input-spinner#readme
- Issues: https://github.com/rodrigues-t/react-bootstrap-input-spinner/issues
- npm.io page: https://npm.io/package/react-input-spinner-event

## Dependencies (2)

- [bootstrap](https://npm.io/package/bootstrap.md) ^4.6.0
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^1.4.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-10-25

## README

# react-input-spinner-event
An input number spinner based on Bootstrap for React.

<img src="images/example.png" />

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'  
  
<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 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).

---
_Source: https://npm.io/package/react-input-spinner-event · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._