Custom number editor (text field) react component
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo fixes #17 by upgrading react-clickdrag Nov 13, 2015
src
.babelrc chore: Update dependencies + eslint Dec 24, 2016
.editorconfig chore: Update dependencies + eslint Dec 24, 2016
.eslintrc chore: Update dependencies + eslint Dec 24, 2016
.gitignore fixes #17 by upgrading react-clickdrag Nov 13, 2015
.npmignore adds npmignore Dec 14, 2015
LICENSE.md added license + readme Oct 21, 2014
README.md Update README.md Nov 13, 2015
package.json 4.0.3 Jan 23, 2018
react-number-editor.gif added license + readme Oct 21, 2014
webpack.config.js fixes #17 by upgrading react-clickdrag Nov 13, 2015

README.md

react-number-editor

NPM

img

A react component to easily use number inputs. This one acts like those in After Effects or similar software.

  • Click and drag to slide the value.
  • Double-click to enter manually a new value.
  • Use your Up/Down keys to increment/decrement the value.
  • Hold shift key to step by bigger value.
  • Hold control/command key to step by smaller value.

Example

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
);

Usage

<NumberEditor />

Here are the list of properties available for the component:

  • min (number) the minimum value. Default no minimum
  • max (number) the maximum value. Default no maximum
  • step (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.
  • onKeyDown (function) This callback is called when a key is pressed, after the control has processed the key press, and allows developers to implement their own shortcuts, etc.

demo

To run the demo, executes this command and go to http://localhost:8080: npm run demo

License

MIT, see LICENSE.md for details.

Thanks

Thanks to @mattdesl for his work on number-editor.