react-input-verification-code

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

• Basic
• Controllable
• Custom Styles

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

License

MIT © ugogo