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 Autosuggest

    Demo Check out the Homepage and the Codepen examples . Features WAI-ARIA compliant , with support for ARIA attributes and keyboard interactions Mobile friendly Plugs in nicely to Flux and Redux applications Full control over suggestions rendering Suggestions can be presented as plain list or multiple sections Suggestions can be retrieved asynchronously Highlight the first suggestion in the list if you wish Supports styling using CSS Modules , Radium , Aphrodite , JSS , and more You decide when to show suggestions (e.g. when user types 2 or more characters) Always render suggestions (useful for mobile and modals) Pass through arbitrary props to the input (e.g. placeholder, type, onChange , onBlur , or any other), or take full control on the rendering of the input (useful for integration with other libraries) Thoroughly tested Installation yarn add react-autosuggest or npm install react-autosuggest --save You can also use the standalone UMD bu...
    Post a Comment
    Read more

    React CSS components

    Motivation Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules. NOTE: The current implementation is based on Webpack but everything is ready to be ported onto other build systems (generic API is here just not yet documented). Raise an issue or better submit a PR if you have some ideas. Installation & Usage Install from npm: npm install react-css-components style-loader css-loader Configure in webpack.config.js: module.exports = { ... module: { loaders: [ { test: /\.react.css$/, loader: 'react-css-components', } ] } ... } Now you can author React components in Styles.react.css: Label { color: red; } Label:hover { color: white; } And consume them like regular React components: import {Label} from './styles.react.css' <Lab...
    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