react-input-verification-code
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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

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

Install

npm i react-input-verification-code

DownloadsWeekly Downloads

6,007

Version

1.0.2

License

MIT

Unpacked Size

53.8 kB

Total Files

9

Last publish

Collaborators

  • onaliugo