react-input-verification-code

react-input-verification-code

A verification code input, mobile autocompletion friendly

Features

• Support native autocompletion when receiving a code via SMS
• Support pasted string

Examples

• Basic
• Controllable
• Custom Styles

peerDependencies

{
  "react": ">=16.0.0",
  "react-dom": ">=16.0.0"
}

Install

yarn add react-input-verification-code

Usage

import React from 'react';
import ReactInputVerificationCode, {
  ReactInputVerificationCodeProps,
} from 'react-input-verification-code';

const customProps: ReactInputVerificationCodeProps = {
  autoFocus: true,
};

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

API

Props

Key	Type	Default	Required	Description
autoFocus	boolean	false	false	Should focus on first render
inputProps	React.InputHTMLAttributes<HTMLInputElement>;	undefined	false	Allow passing custom props into the inputs
length	number	4	false	How many inputs will be rendered
onChange	function	() => null	false	Function called when the value changes
onCompleted	function	() => null	false	Function called when the value is completed
placeholder	string	·	false	Inputs placeholder
value	string	""	false	Default value
type	'alphanumeric, number'	number	false	Should accepts alphanumeric values or only numbers

Custom Styles

Simply override the styles using the following classnames

.ReactInputVerificationCode-container {
  /*  */
}

.ReactInputVerificationCode-item {
  /*  */
}

License

MIT © ugogo