react-component / Input Number
Licence: mit
React Input Number
Stars: ✭ 199
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Input Number
Ant Design Mobile
Fluent and powerful mobile component library based on React.
Stars: ✭ 9,489 (+4668.34%)
Mutual labels: antd, antd-mobile, ant-design
react-drag
A drag and drop platform based on sortable.js front-end visualization. 一个基于sortable.js的前端可视化搭建的拖拽平台，ui组件采用antd-mobile.通过umi脚手架构建.技术栈采用dva+hooks+umi+antd-mobile+sortable.js+react-color.
Stars: ✭ 51 (-74.37%)
Mutual labels: antd, antd-mobile, ant-design
React Ui Roundup
A one-stop-shop for comparing the features of all the best React frameworks. Useful for designers and engineers alike!
Stars: ✭ 177 (-11.06%)
Mutual labels: antd, ant-design
React Antd Admin
用React和Ant Design搭建的一个通用管理后台
Stars: ✭ 1,313 (+559.8%)
Mutual labels: antd, ant-design
React Molin
react-molin是一个全新的基于webpack3、react15、react-router4、antd-mobile的前端架构实现方案（h5）
Stars: ✭ 184 (-7.54%)
Mutual labels: antd-mobile, ant-design
React Antd Multi Tabs Admin
ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
Stars: ✭ 73 (-63.32%)
Mutual labels: antd, ant-design
Ant Design Pro Plus
✨ 基于 ant-design-pro 做一些微小的工作。
Stars: ✭ 88 (-55.78%)
Mutual labels: antd, ant-design
Antd Schema Form
Based on Ant Design, interactive forms can be generated through JSON Schema configuration. - 基于Ant Design，可以通过JSON Schema配置生成可交互的表单。
Stars: ✭ 137 (-31.16%)
Mutual labels: antd, ant-design
Dynamic Antd Theme
🌈 A simple plugin to dynamic change ant-design theme whether less or css.
Stars: ✭ 174 (-12.56%)
Mutual labels: antd, ant-design
Awesome Uikit
Collect JS Frameworks, Web components library and Admin Template.
Stars: ✭ 1,136 (+470.85%)
Mutual labels: antd, ant-design
Fc Angular
快速搭建angular后台管理系统的admin template。Fast development platform based on angular8, ng.ant.design built multi-tab page background management system (continuous upgrade) ^_^
Stars: ✭ 171 (-14.07%)
Mutual labels: antd, ant-design
Ant Design Vue Pro
👨🏻💻👩🏻💻 Use Ant Design Vue like a Pro!
Stars: ✭ 8,965 (+4405.03%)
Mutual labels: antd, ant-design
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-77.89%)
Mutual labels: antd, ant-design
Abp React Antd
一个基于 ABP + React + Ant Design Pro 的快速开发框架
Stars: ✭ 175 (-12.06%)
Mutual labels: antd, ant-design
Ant Design Blazor
Enterprise-class UI components based on Ant Design and Blazor.
Stars: ✭ 39 (-80.4%)
Mutual labels: antd, ant-design
React Antd Todo
A simple todo list app built with React, Redux and Antd - Ant Design
Stars: ✭ 42 (-78.89%)
Mutual labels: antd, ant-design
Spring Security React Ant Design Polls App
Full Stack Polls App built using Spring Boot, Spring Security, JWT, React, and Ant Design
Stars: ✭ 1,336 (+571.36%)
Mutual labels: antd, ant-design
rc-input-number
Input number control.
Screenshots
Install
Usage
import InputNumber from 'rc-input-number';
export default () => <InputNumber defaultValue={10} />;
Development
npm install
npm start
Example
http://127.0.0.1:8000/examples/
online example: https://input-number.vercel.app/
API
props
| 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 |
| 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 | |
| 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 |
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
open coverage/ dir
License
rc-input-number is released under the MIT license.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].