Custom number editor (text field) react component
MIT License
A react component to easily use number inputs. This one acts like those in After Effects or similar software.
var React = require('react');
var NumberEditor = require('react-number-editor');
React.render(
<NumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} />,
document.body
);
<NumberEditor />
Here are the list of properties available for the component:
min
(number) the minimum value. Default no minimummax
(number) the maximum value. Default no maximumstep
(number) the step to increment when sliding and with up/down arrows. Default 1.stepModifier
(number) how much to multiply/divide with the modifier keys (shift and control/command). Default is 10.decimals
(number) the number of decimals to show. Default 0.initialValue
(number) the default value to show. Default 0.className
(string) the class name to apply to the DOM element. Default empty.onValueChange
(function) The callback when the value changes. The value is passed as the parameter.To run the demo, executes this command and go to http://localhost:8080
:
npm run demo
MIT, see LICENSE.md for details.
Thanks to @mattdesl for his work on number-editor.