Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-analog-number-input

1.0.6 • Public • Published

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.

Install

npm i react-analog-number-input

DownloadsWeekly Downloads

2

Version

1.0.6

License

ISC

Unpacked Size

67.5 kB

Total Files

21

Last publish

Collaborators

  • avatar