React-input-verification-code NPM

react-input-verification-code

A verification code input, autocompletion friendly

Features

Support native autocompletion when receiving a code via SMS
Support pasted string (when number)

Examples

Install

npm install --save react-input-verification-code

yarn add react-input-verification-code

Usage

import * as React from 'react';
import ReactInputVerificationCode from 'react-input-verification-code';

export default function App() {
  return <ReactInputVerificationCode />;
}

API

Props

Key	Type	Default	Required	Description
autoFocus	`boolean`	false	false	Focus on render
length	`number`	`4`	false	How many items will be rendered
onChange	`function`	`() => {}`	false	Function called when the value changes
onCompleted	`function`	`() => {}`	false	Function called when the code is completed
placeholder	`string`	`·`	false	String rendered in each item when no value has been typed
value	`string`	`() => {}`	false	Control internal input value
type	`text` or `password`	`text`	false	Display the item value or a password mask
passwordMask	`string`	`•`	false	Password mask

CSS Properties

The following CSS properties are set globally so you can easily override them to fit your needs

Key	Default	Description
`--ReactInputVerificationCode-itemWidth`	`4.5rem`	Width of an item
`--ReactInputVerificationCode-itemHeight`	`5rem`	Height of an item
`--ReactInputVerificationCode-itemSpacing`	`1rem`	Space between two items