React Input Verification Code Save

A verification code input, autocompletion friendly

Project README

⚠️ 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

Open Source Agenda is not affiliated with "React Input Verification Code" Project. README Source: ugogo/react-input-verification-code

Open Source Agenda Badge

Open Source Agenda Rating