@lokua/number-box
v2.2.0
Published
HTML5 input with draggable number value similar to MaxMSP gui elements
Downloads
10
Readme
number-box
React HTML5 input with draggable number value.
Install
npm i @lokua/number-box --save
Usage
import NumberBox from '@lokua/number-box'
// ...
// default range of 0 - 127
<NumberBox
value={this.state.value}
onChange={value => {
this.setState({ value })
}}
/>
API / Props
Defaults (not required)
value = 0
min = 0
max = 127
step = 1
decimals = 0
Required
onChange(value)
Additional Input Props
NumberBox will pass virtually all props on to the underlying HTMLInputElement
,
however certain handlers cannot be overriden in order for NumberBox
to work
correctly, including:
onBlur
onMouseDown
onMouseUp
onTouchStart
onTouchEnd
onKeyDown
You can still supply them in props, however, and they will be called after NumberBox has done its thing with its own implementation.
Styles
NumberBox does not ship with any styles in order to make customization as easy as possible. See the demo for some possible inspiration
Priot Art
Most of the implementation is based on Dat GUI's NumberControllerBox and NexusUI's Number.
License
MIT