react-verification-input

react-verification-input

react-verification-input is a customizable, masked input, which can be used to enter all sorts of code e.g. security codes when two-factor authenticating.

Installation

Install it by running

npm install react-verification-input --save

or

yarn add react-verification-input

in your terminal.

Usage

Import the React component as follows:

import VerificationInput from 'react-verification-input'

Inside the render method write:

<VerificationInput length={6} />

That´s it! You now have a basic verification input with default configuration rendered on your page. 🎉😃

The length-prop is the only one required. For a complete API overview read the next chapter.

API documentation

Required options

Option	Type	Default	Description
length	Number	-	Define, how many characters the input should allow.

Other options

Option	Type	Default	Description
validChars	String	'A-Za-z0-9'	Define, which characters should be allowed. The string is inserted into a regexp character set ( /[]/ ) for input validating.
placeholder	String	'·' (U+00B7)	Define, which character should be displayed as placeholder in empty fields. Note: Currently the blank character can´t be used as placeholder, this will be possible in a later version.
container	Object	null	Define the props of the container div. All props except for className are passed directly to the div element. Use { className: 'your-class' } to style the input. This options are available on every element. For more details on how to apply your custom styling see here.
inputField	Object	null	Define the props of the input element. See container for more details.
characters	Object	null	Define the props of the characters div. See container for more details.
character	Object	null	Define the props of the character divs. See container for more details.

Custom styling

TODO

Work in progress

This project is still work in progress.

Things, that need to be done:

• Fix order of style sheets
  • When specifiying custom style classes, the custom styles are getting overwritten by the default styles because of the wrong order
• Configure production build
  • Minify etc.
• Make compatible with Redux Form
• Add ability to use ' ' (blank) as placeholder