An autocomplete verification code input with react

react-input-verification-code

A verification code input, autocompletion friendly

Examples

• Basic
  • CodeSandbox
  • Source
• Custom Styles
  • CodeSandbox
  • Source

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
length	number	4	false	How many items will be rendered
onChange	function		true	Function called when the value changes
placeholder	string	·	false	String rendered in each item when no value has been typed

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

Download Details:

Author: ugogo

Live Demo: https://codesandbox.io/s/basic-6ejdp

GitHub: https://github.com/ugogo/react-input-verification-code

#reactjs #javascript #react