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

next.js from zeit

License

MIT