Skip to main content

react-number-editor

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

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.

    • License

    MIT

    Note: Special thanks to Tommy

    Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
    Labels:

    Comments

    Post a Comment

    Popular posts from this blog

    react-bootstrap

    Bootstrap 3 components built with React https://react-bootstrap.github.io/ Docs See the documentation with live editable examples. Related modules react-router-bootstrap – Integration with React Router React Bootstrap Extended - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, pullRight adds the class pull-right to a component. Local setup Install the dependencies with npm install Run tests npm test Run tests in watch mode npm run tdd Run the docs site in development mode with npm run docs. This will watch for file changes as you work. Simply refresh the page to see the updates. Build with npm run build Note: Special thanks to react-bootstrap Contact Me - mtscout6+react-bootstrap@gmail.com Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
    Post a Comment
    Read more

    react-overlays

    Utilities for creating robust overlay components demos and docs at: https://react-bootstrap.github.io/react-overlays/ Install npm install --save react-overlays All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components. note: we are still in the process of abstracting out these components so the API's will probably change until we are sure that all of the bootstrap components can cleanly be implemented on top of them. Pre 1.0.0 breaking changes happen on the minor bump while feature and patches accompany a patch bump. Note: Spec...
    Post a Comment
    Read more

    React-LocalStorage

    Simply synchronize a component's state with localStorage, when available. Usage A simple component: var React = require('react'); var LocalStorageMixin = require('react-localstorage'); var TestComponent = module.exports = React.createClass({ displayName: 'TestComponent', // This is all you need to do mixins: [LocalStorageMixin], getInitialState: function() { return {counter: 0}; }, onClick: function() { this.setState({counter: this.state.counter + 1}); }, render: function() { return ( <span onClick={this.onClick}>{this.state.counter}</span> ); } }); Options The key that state is serialized to under localStorage is chosen with the following code: function getLocalStorageKey(component) { if (component.getLocalStorageKey) return component.getLocalStorageKey(); if (component.props.localStorageKey === false) return false; if (typeof component.props.localStor...
    Post a Comment
    Read more