React-code-input NPM

react-code-input

React component for entering and validating PIN code.

Live example here

Installation

npm i --save react-code-input

Usage

Numeric input:

Numeric input

...
<ReactCodeInput type='number' fields={6} />
...

Text input:

Text input

...
<ReactCodeInput type='text' fields={6} />
...

Password input:

Password input

...
<ReactCodeInput type='password' fields={6} />
...

Numeric input with options:

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.