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.

    Install

    npm i react-bootstrap-input-spinner

    DownloadsWeekly Downloads

    386

    Version

    1.0.2

    License

    GPL-3.0-or-later

    Unpacked Size

    71.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • rodrigues-t