Skip to content
React component for entering and validating PIN code.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci ci(add-release-to-pipeline): release notes (#33) Jun 11, 2018
.storybook feature(storybook): storybook added (#50) Sep 8, 2018
docs updated CHANGELOG.md Nov 2, 2018
src Typings added for the component (#77) May 27, 2019
styles
.babelrc Chore/tests (#30) Jun 5, 2018
.eslintrc fix(onchange): trigger onChange on ampty value (#54) Sep 20, 2018
.gitignore feature(storybook): storybook added (#50) Sep 8, 2018
.npmignore feature(storybook): storybook added (#50) Sep 8, 2018
CHANGELOG.md updated CHANGELOG.md Nov 2, 2018
LICENSE Initial commit Oct 19, 2016
README.md Typings added for the component (#77) May 27, 2019
jestsetup.js Chore/tests (#30) Jun 5, 2018
package-lock.json updated CHANGELOG.md Nov 2, 2018
package.json Typings added for the component (#77) May 27, 2019
webpack.config.js Apply fix for window object in UMD builds in Webpack as described in w… Oct 8, 2018
yarn.lock feature(storybook): storybook added (#50) Sep 8, 2018

README.md

react-code-input

React component for entering and validating PIN code.

CircleCI npm version codecov

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.
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.
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.

Compatible with

redux-form from erikras

next.js from zeit

License

MIT

You can’t perform that action at this time.