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

    Rx Visualizer - Animated playground for Rx Observables https://rxviz.com

    Description RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear. You can also: Control the speed of the animation by modifying the Time window input. Copy the resulting SVG to include in your next Rx presentation. Share the visualization with your friends. Examples Basic interval Random error Higher order Observable Pause and resume How does it work? RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future. Technically, we subscribe to the given Observable, and, once a value is observed, we simply add it to the visualization. It's that simple! How about higher order Observables? No different. Since a higher order Observable is simply an Observable whose values ...
    Post a Comment
    Read more

    React-Crouton - A message component for reactjs

    Live Demo Getting Started Install via npm npm i react-crouton --save-dev Usage var Crouton = require('react-crouton') var data = { id: Date.now(), type: 'error', message: 'Hello React-Crouton', autoMiss: true || false, onDismiss: listener, buttons: [{ name: 'close', listener: function() { } }], hidden: false, timeout: 2000 } <Crouton id={data.id} type={data.type} message={data.message} onDismiss={data.onDismiss} buttons={data.buttons} hidden={data.hidden} timeout={data.timeout} autoMiss={data.autoMiss}> // You can render child component here // <ChildComponent /> </Crouton> Options id required, every message need an unique id. type: number message required, the message what you want show. type: string || array example: message: 'Hello React-Crouton' message: ['Hello', ...
    1 comment
    Read more

    React Async

    React Async provides a way for React components to subscribe for observable values. Installation React Async is packaged on npm: $ npm install react-async Basic usage React Async provides a component decorator @Async which given a set of observable specifications wraps a regular React component and returns a new one which subscribes to observables and re-renders the component when new data arrives. The basic example looks like: import React from 'react'; import Async from 'react-async'; import Rx from 'rx'; function defineXHRObservable(url) { return { id: url, start() { return Rx.fromPromise(fetch(url)) } } } function MyComponentObservables(props) { return { user: defineXHRObservable(`/api/user?user${props.userID}`) } } @Async(MyComponentObservables) class MyComponent extends React.Component { render() { let {user} = this.props ... } } The @Async decorator in...
    Post a Comment
    Read more