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:
Compatible with
redux-form
from erikras
next.js
from zeit
License
MIT