React-analog-number-input NPM

react-analog-number-input

A react component that displays number inputs as analog.

Demo and Example

Live Demo: https://blakdave.github.io/react-analog-number-input/

Installation

Use the package manager npm to install react-analog-number-input.

npm install react-analog-number-input

Import as follows:

import ReactAnalogNumberInput from 'react-analog-number-input'

// CSS
import 'react-analog-number-input/css/react-analog-number-input.css';

Usage

The default layout is vertical.

const onChange = value => {
    // use value in function
};

<ReactAnalogNumberInput onChange={onChange} />

Horizontal Layout

const onChange = value => {
    // use value in function
};

<ReactAnalogNumberInput onChange={onChange} horizontal />

Custom Icons

You can customize the icons to use your images

const addIcon = <img src="your-image-link-here" />
const subtractIcon = <img src="your-image-link-here" />

const onChange = value => {
    // use value in function
};

<ReactAnalogNumberInput onChange={onChange} addIcon={addIcon} subtractIcon={subtractIcon} />

Available Props

Prop	Description	Type	Value
onChange	This is the function that receives the component's value on your end	Function
value	The default valueOptional	Number	Default is 0
max	Maximum valueOptional	Number	Default is 20
className	Custom css class to help you style the component betterOptional	String
horizontal	The layout of the componentOptional	Boolean	Default is false
addIcon	Custom "add" icon for the vertical layout. e.g `<img src="your-img-link-here" />`Optional	HTML ELement
subtractIcon	Custom "subtract" icon for the vertical layout. e.g `<img src="your-img-link-here" />`Optional	HTML ELement
horizontalAddIcon	Custom "add" icon for the horizontal layout. e.g `<img src="your-img-link-here" />`Optional	HTML ELement
horizontalSubtractIcon	Custom "subtract" icon for the horizontal layout. e.g `<img src="your-img-link-here" />`Optional	HTML ELement