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 value Optional	Number	Default is 0
max	Maximum value Optional	Number	Default is 20
className	Custom css class to help you style the component better Optional	String
horizontal	The layout of the component Optional	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

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT Copyright (c) David (Blak Dave) 2020.