React Ticker Input

A minimal reactjs package to render a number input with ticker selectors. 🔥🔥

Live Playground

To see the react number input in action, click here.

OR

To run that demo on your computer:

• Clone this repository

•   npm install

•   npm start

• Visit http://localhost:3000/

Getting Started

Import Component

    import Ticker from 'react-ticker-input'

Usage

This is the minimum code required to get started with react-ticker-input. Other required and non-required props are documented below.

    import React, { useState } from 'react'
    import Ticker from 'react-ticker-input'

    const App = () => {
    
        const [value, setValue] = useState(10)
        return <Ticker 
            value={value}
            setValue={setValue}
        />
    }

    export default App

Supported Props

| name | description | default | required | type | |--------------------|-----------------------------------------------------------------------------|-------------|--------------|----------------------| | value | value of the controlled input (should be a component state) | 0 | true | number | | setValue | function called when value changes with updated value | undefined | true | function ⎮ undefined | | min | minimum value of the input | 0 | false | number | | max | maximum value of the input | 100 | false | number | | majorGap | gap between taller (prominent) ticks | 10 | false | number | | minorGap | gap between smaller ticks | 2 | false | number | | hideText | if true, hides the value text | false | false | boolean | | textFormatter | function that takes in the value and can be used to format it | undefined | false | function ⎮ undefined | | throttleScroll | if true, applies throttling while scroll improves performance, decreases UX | false | false | boolean | | throttleTimeout | delay for scroll throttle | 250 | false | number | | stickMaxWidth | max width between two sticks in vw | 4 | false | number | | knobClassName | className for the knob pointer | '' | false | string | | containerClassName | className for the outermost container | '' | false | string | | textClassName | className for the top text | '' | false | string | | tickerClassName | className for the container that contains all the sticks | '' | false | string | | tickClassName | className for all the sticks (tall and small both) | '' | false | string | | largeTickClassName | className for the taller sticks | '' | false | string | | tickLabelClassName | className for the label text displayed beneath taller sticks | '' | false | string |

Other thing that should be taken care of is that majorGap, the difference between max and min, both should be a multiple of the minGap.