You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
**value** |`number` or `string` | `""` which converts to 0
64
+
**min** |`number` | `Number.MIN_SAFE_INTEGER`
65
+
**max** |`number` | `Number.MAX_SAFE_INTEGER`
66
+
**step** |`number` | 1
67
+
**precision**|`number` | 0
68
+
**parse** |`function` | parseFloat
69
+
**format** |`function` | none
70
+
**className**|`string` | none
71
+
**disabled** |`boolean` | none
72
+
**readOnly** |`boolean` | none
73
+
**style** |`object` | none
74
+
**size** |`number` or `string` | none
75
+
**mobile** |`true`, `false`, 'auto' or `function`|`auto`
75
76
76
77
Any other option is passed directly the input created by the component. Just
77
78
don't forget to camelCase the attributes. For example `readonly` must be `readOnly`.
78
79
See examples/index.html for examples.
79
80
80
81
## Styling
81
-
This component comes with styles written in LESS and precompiled to CSS in
82
-
[src/style](./src/style). It's up to you to decide how to use them but here are a few options:
83
-
* Copy [src/style/NumericInput.css](./src/style/NumericInput.css) code to your css
84
-
* Setup less preprocessing from [src/style/NumericInput.less](./src/style/NumericInput.less) to wherever you need.
85
-
* Use modern tool like webpack and then just do `require('node_modules/react-numeric-input/src/style/NumericInput.less');`.
86
-
See [examples/examples.jsx](./examples/examples.jsx) for example.
87
-
88
-
89
-
90
-
####v2.0.0 (not released yet)
91
-
92
-
93
-
----------
94
-
Since v2 the component uses inline styles which you can customise. The `style` prop is not added directly to the component but instead it is a container for styles which you can overwrite. For example
82
+
The component uses inline styles which you can customize. The `style` prop is not added
83
+
directly to the component but instead it is a container for styles which you can overwrite.
84
+
For example
95
85
```xml
96
86
<NumericInputstyle={{
97
87
input: {
98
88
color: 'red'
99
89
}
100
90
}}>
101
91
```
102
-
You can modify the styles for everything including states like `:hover`, `:active` and `:disabled`. Take a look at the source to see what styles are supported.
103
-
104
-
Also, the style is stored as static class property so that you can change it and affect all the components from your script. Example:
92
+
You can modify the styles for everything including states like `:hover`, `:active` and
93
+
`:disabled`. Take a look at the source to see what styles are supported. Also, the style is
94
+
stored as static class property so that you can change it and affect all the components
95
+
from your script. Example:
105
96
```js
106
97
importNumericInputfrom'react-numeric-input';
107
98
NumericInput.style.input.color='red';
108
99
```
109
100
110
-
Finally, you can still use CSS if you want. Each component's root element has the `react-numeric-input` class so that it is easy to find these widgets on the page. However, keep in mind that because of the inline styles you might need to use `!important` for some rules. Example:
101
+
Finally, you can still use CSS if you want. Each component's root element has the
102
+
`react-numeric-input` class so that it is easy to find these widgets on the page. However,
103
+
keep in mind that because of the inline styles you might need to use `!important` for some
104
+
rules. Example:
111
105
```css
112
106
.react-numeric-inputinput {
113
107
color: red;
114
108
}
115
109
```
116
110
117
111
## Keyboard navigation
118
-
* You can use <kbd>Up</kbd> and <kbd>Down</kbd> arrow keys to increment/decrement the input value.
119
-
* <kbd>Ctrl/Command + Up</kbd> and <kbd>Ctrl/Command + Down</kbd> to use smaller step (`step / 10`).
112
+
* You can use <kbd>⬆</kbd> and <kbd>⬇</kbd> arrow keys to increment/decrement the input value.
113
+
* <kbd>Ctrl + ⬆</kbd> or <kbd>⌘ + ⬆</kbd> and <kbd>Ctrl + ⬇</kbd> or <kbd>⌘ + ⬇</kbd> to use smaller step (`step / 10`).
120
114
Note that this will only work if you have specified a `precision` option that supports it.
121
-
* <kbd>Shift + Up</kbd> and <kbd>Shift + Down</kbd> to use bigger step (`step * 10`).
122
-
115
+
* <kbd>Shift + ⬆</kbd> and <kbd>Shift + ⬇</kbd> to use bigger step (`step * 10`).
116
+
117
+
## Integration with external scripts
118
+
This component aims to provide good integration not only with React but with any third party script
119
+
that might want to work with it on the current page.
120
+
121
+
### valueAsNumber
122
+
The native number inputs have special property called `valueAsNumber`. It provides access to the
123
+
value as number to be used by scripts. In this react component this becomes even more desirable as
124
+
the display value might be formatted and have nothing in common with the underlying value meaning
125
+
that one might need to call parse to find out what the numeric value is. For that reason this
126
+
component exposes `_valueAsNumber` property on the input element. Note the underscore in front -
127
+
the `valueAsNumber` is readonly and not even accessible on input[type="text"]. Also keep in mind
128
+
that this really is a number (float) so it might be different from the displayed value. For
129
+
example an input showing "12.30" will have `_valueAsNumber` of `12.3`.
130
+
131
+
### setValue()
132
+
An external script that does not "understand" React can still work with this component by reading
133
+
the `_valueAsNumber` or by calling the `setValue()` method exposed on the input element. Here is
0 commit comments