rc-input-number
input number ui component for react.
install
Usage
var InputNumber = require('rc-input-number');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<InputNumber defaultValue={19}/>, container);
Development
npm install
npm start
API
props
| name | type | default | description |
|---|---|---|---|
| min | Number | Specifies the minimum value | |
| onClick | |||
| placeholder | string | ||
| max | Number | Specifies the maximum value | |
| step | Number or String | 1 | Specifies the legal number intervals |
| precision | Number | Specifies the precision length of value | |
| disabled | Boolean | false | Specifies that an InputNumber should be disabled |
| focusOnUpDown | Boolean | true | whether focus input when click up or down button |
| required | Boolean | false | Specifies that an InputNumber is required |
| autoFocus | Boolean | false | Specifies that an InputNumber should automatically get focus when the page loads |
| readOnly | Boolean | false | Specifies that an InputNumber is read only |
| name | String | Specifies the name of an InputNumber | |
| id | String | Specifies the id of an InputNumber | |
| value | Number | Specifies the value of an InputNumber | |
| defaultValue | Number | Specifies the defaultValue of an InputNumber | |
| onChange | Function | Called when value of an InputNumber changed | |
| onFocus | Function | Called when an element gets focus | |
| style | Object | root style. such as {width:100} | |
| upHandler | React.Node | custom the up step element | |
| downHandler | React.Node | custom the down step element | |
| formatter | (value: number|string): displayValue: string | Specifies the format of the value presented | |
| parser | (displayValue: string) => value: number | `input => input.replace(/[^\w\.-]*/g, '')` | Specifies the value extracted from formatter |
| pattern | string | Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation |
Keyboard Navigation
- When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by
step - With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by
10 * step - With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by
0.1 * step
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
