https://github.com/tleunen/react-number-editor
Custom number editor (text field) react component
https://github.com/tleunen/react-number-editor
Last synced: over 1 year ago
JSON representation
Custom number editor (text field) react component
- Host: GitHub
- URL: https://github.com/tleunen/react-number-editor
- Owner: tleunen
- License: mit
- Created: 2014-10-21T22:36:04.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T08:58:02.000Z (almost 3 years ago)
- Last Synced: 2025-02-27T07:42:35.119Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 85 KB
- Stars: 70
- Watchers: 6
- Forks: 15
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-number-editor
[](https://nodei.co/npm/react-number-editor/)
A [react](https://github.com/facebook/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
```js
var React = require('react');
var NumberEditor = require('react-number-editor');
React.render(
,
document.body
);
```
## Usage
### ``
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](/LICENSE.md) for details.
## Thanks
Thanks to [@mattdesl](https://github.com/mattdesl) for his work on [number-editor](https://github.com/mattdesl/number-editor).