40818419 / React Code Input
Licence: mit
React component for entering and validating PIN code.
Stars: ✭ 207
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Code Input
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1013.53%)
Mutual labels: react-component, input
insect
🛠 Highly customisable, minimalistic input x select field for React.
Stars: ✭ 33 (-84.06%)
Mutual labels: input, react-component
React Intl Tel Input
Rewrite International Telephone Input in React.js. (Looking for maintainers, and PRs & contributors are also welcomed!)
Stars: ✭ 212 (+2.42%)
Mutual labels: react-component, input
react-simple-range
🔉 React slider component for inputting a numeric value within a range.
Stars: ✭ 20 (-90.34%)
Mutual labels: input, react-component
react-star-ratings
A customizable svg star rating component for selecting x stars or visualizing x stars
Stars: ✭ 128 (-38.16%)
Mutual labels: input, react-component
react-ratings-declarative
A customizable rating component for selecting x widgets or visualizing x widgets
Stars: ✭ 41 (-80.19%)
Mutual labels: input, react-component
React Telephone Input
React component for entering and validating international telephone numbers
Stars: ✭ 254 (+22.71%)
Mutual labels: react-component, input
React Currency Input Field
React component for an input field
Stars: ✭ 111 (-46.38%)
Mutual labels: react-component, input
React Mobile Picker
An iOS like select box component for React
Stars: ✭ 180 (-13.04%)
Mutual labels: react-component
Iio Sensor Proxy
IIO accelerometer sensor to input device proxy
Stars: ✭ 192 (-7.25%)
Mutual labels: input
React Native Google Place Picker
React Native Wrapper of Google Place Picker for iOS + Android.
Stars: ✭ 180 (-13.04%)
Mutual labels: input
React Native Card Flip
Card flip animation for React Native
Stars: ✭ 183 (-11.59%)
Mutual labels: react-component
Ngx Material File Input
File input for Angular Material form-field
Stars: ✭ 193 (-6.76%)
Mutual labels: input
React Rater
⭐️ Interative & customizable star rater
Stars: ✭ 180 (-13.04%)
Mutual labels: react-component
React Native Pdfview
📚 PDF viewer for React Native
Stars: ✭ 198 (-4.35%)
Mutual labels: react-component
Bootstrap Input Spinner
A Bootstrap 4 / jQuery plugin to create input spinner elements for number input
Stars: ✭ 176 (-14.98%)
Mutual labels: input
React Md Spinner
Material Design spinner components for React.js.
Stars: ✭ 195 (-5.8%)
Mutual labels: react-component
react-code-input
React component for entering and validating PIN code.
Live example here
Installation
npm i --save react-code-input
Usage
Numeric input:
...
<ReactCodeInput type='number' fields={6} />
...
Text input:
...
<ReactCodeInput type='text' fields={6} />
...
Password input:
...
<ReactCodeInput type='password' fields={6} />
...
Numeric input with options:
import { reactCodeInput } from 'CodeInputField.scss'
...
const props = {
className: reactCodeInput,
inputStyle: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'lightskyblue',
border: '1px solid lightskyblue'
},
inputStyleInvalid: {
fontFamily: 'monospace',
margin: '4px',
MozAppearance: 'textfield',
width: '15px',
borderRadius: '3px',
fontSize: '14px',
height: '26px',
paddingLeft: '7px',
backgroundColor: 'black',
color: 'red',
border: '1px solid red'
}
}
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
Usage with next.js
import dynamic from 'next/dynamic';
const ReactCodeInput = dynamic(import('react-code-input'));
...
<ReactCodeInput type='number' fields={6} {...props}/>
...
Props:
| Property | Type | Description |
|---|---|---|
| type | string | Only types like: text, number, password and tel are accepted. |
| fields | number | Allowed amount of characters to enter. |
| value | string | Setting the value of code input field. |
| placeholder | string | Setting the placeholder of code input field. |
| name | string | Setting the name of component. |
| onChange | func | Function, which is called whenever there is a change of value in the input box. |
| touch | func | Marks the given fields as "touched" to show errors. |
| untouch | func | Clears the "touched" flag for the given fields. |
| className | string | Add classname to the root element. |
| style | object | Setting the styles of container element. |
| inputStyle | object | Setting the styles of each input field. |
| inputStyleInvalid | object | Setting the styles of each input field if isValid prop is false. |
| isValid | bool | Returns true if an input element contains valid data. |
| disabled | bool | When present, it specifies that the element should be disabled. |
| autoFocus | bool | Setup autofocus on the first input, true by default. |
| filterKeyCodes | array | Filter characters on key down. |
| filterChars | array | Filter characters; default is ['-', '.'] |
| filterCharsIsWhitelist | bool |
filterChars acts as blacklist if false, whitelist if true; false by default. |
| pattern | string | The pattern prop specifies a regular expression that the element's value is checked against. |
| inputMode | string | The inputMode prop tells the browser on devices with dynamic keyboards which keyboard to display. |
| autoComplete | string | The autoComplete prop specifies whether or not an input field should have autocomplete enabled. |
Compatible with
redux-form from erikras
License
MIT
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].