react-input-verification-code

A React Verification Code Input, Autocompletion Friendly


Keywords
react, verify, verification, code, pin-code, authentication-code, input, autocompletion, otp, otp-code, one-time-password, authentication, verification-code
License
MIT
Install
npm install react-input-verification-code@2.0.0-11

Documentation

react-input-verification-code

A verification code input, autocompletion friendly

NPM JavaScript Style Guide

Features

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

Examples

peerDependencies

{
  "react": ">=16.0.0",
  "styled-components": ">=5.0.0"
}

Install

yarn add react-input-verification-code

# if you don't use `styled-components` in your project
# you have to install it as well
yarn add react-input-verification-code styled-components

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