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 |

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.