Skip to content

ugogo/react-input-verification-code

Repository files navigation

⚠️ This README is for the v2 which is currently in beta release
The v1 can been found here


react-input-verification-code

A verification code input, mobile autocompletion friendly

NPM JavaScript Style Guide

Features

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

Examples

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