react-otpjs

A react-otpjs is a simple fully customizable react OTP field component.

Demo

| Codesandbox Demo | Interactive Demo | |--|--|

Installation

To install the latest stable version:

Using yarn

yarn add react-otpjs

Using npm

npm i react-otpjs

Basic Usage

import React, { useState } from 'react';
import  { OTPInput } from "react-otpjs";
const App = () => {
const [value, setValue] = useState('');
return (
      <OTPInput
      value={value}
      onChange={(otp)=>setValue(otp)}
      numInputs={4}
      />
   );
 };
       

API

|Name| Type | Required | Default |--|--|--| --| | numOfInputs | number |true| |fieldWidth|string|false| 50px |fieldHeight|sring|false|50px |placeHolder|string|false|* |fieldSeperator|ReactNode|false| - |filedClassName|string| false| |containerClassName|string|false| |autoFocus|boolean|false|false |disabled|boolean|false|false |isError|boolean|false|false |isTypeNumber|boolean|false|true |errorStyle|Object|false| Visit Documentation |inpuStyle|Object|false| [Visit Documentation](https://shibu.dev) |inputFocusStyle|Object|false| Visit Documentation |onChange|Function |true|[Visit Documentation](https://shibu.dev)