Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
rc-input-number
Advanced tools
The rc-input-number package is a React component that provides an input field specifically designed for numeric values. It allows users to input numbers either by typing them directly or by using increment and decrement buttons. This package offers features such as precision control, keyboard navigation, and customizable styles.
Basic Numeric Input
This code sample demonstrates how to create a basic numeric input field with a default value, minimum, and maximum value.
import InputNumber from 'rc-input-number';
function App() {
return (
<InputNumber
defaultValue={3}
min={1}
max={10}
/>
);
}
Precision Control
This code sample shows how to set the step and precision for the numeric input, allowing users to increment or decrement by a specific value and control the number of digits after the decimal point.
import InputNumber from 'rc-input-number';
function App() {
return (
<InputNumber
defaultValue={3.5}
step={0.1}
precision={2}
/>
);
}
Keyboard Navigation
This code sample illustrates how to handle keyboard events, enabling users to navigate and modify the input value using their keyboard.
import InputNumber from 'rc-input-number';
function App() {
return (
<InputNumber
defaultValue={3}
onKeyDown={(e) => console.log('KeyDown', e)}
/>
);
}
Custom Styles
This code sample demonstrates how to apply custom styles to the numeric input component to match the design requirements of your application.
import InputNumber from 'rc-input-number';
function App() {
return (
<InputNumber
defaultValue={3}
style={{ width: 100 }}
/>
);
}
The react-numeric-input package is another React component that provides similar functionality to rc-input-number. It allows for numeric input with increment and decrement controls. It also supports keyboard navigation and can be styled using CSS. Compared to rc-input-number, it may offer different customization options or API design.
The react-number-input package is a lightweight React component for numeric input. It includes features like formatting and validation. While it provides similar functionality, the focus on formatting and validation might make it more suitable for use cases where these features are a priority.
The input-number package is a generic HTML5 number input component that can be used with or without a framework like React. It provides a simple way to input numbers with browser-native controls. Compared to rc-input-number, it might not offer as many customization options or React-specific features.
Input number control.
import InputNumber from 'rc-input-number';
export default () => <InputNumber defaultValue={10} />;
npm install
npm start
http://127.0.0.1:8000/examples/
online example: https://input-number.vercel.app/
name | type | default | description |
---|---|---|---|
prefixCls | string | rc-input-number | Specifies the class prefix |
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 |
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 |
controls | Boolean | true | Whether to enable the control buttons |
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 | |
onBlur | Function | Called when user leaves an input field | |
onPressEnter | Function | The callback function that is triggered when Enter key is pressed. | |
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 | |
decimalSeparator | string | Specifies the decimal separator | |
inputMode | string | Specifies the inputmode of input | |
wheel | Boolean | true | Allows changing value with mouse wheel |
step
10 * step
0.1 * step
step
10 * step
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-input-number is released under the MIT license.
FAQs
React input-number component
The npm package rc-input-number receives a total of 1,141,562 weekly downloads. As such, rc-input-number popularity was classified as popular.
We found that rc-input-number demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.