@dustyjay/otp-input NPM

Otp Input

A light-weight package to display otp inputs with the option of customizing the input to suit your project designs. The package does not contain any styling which leaves that power in your hands.

Installation

Using npm
$ npm install @dustyjay/otp-input

Using yarn
$ yarn add @dustyjay/otp-input

Usage

import { OtpInput } from "@dustyjay/otp-input"

<OtpInput
  numberOfInputs={5}
  onComplete={(value) => console.log('Completed OTP is', value)}
/>

Props

Name	Type	Description
numberOfInputs	number	The number of otp inputs to be displayed. Required
inputStyle	React.CSSProperties	Styling properties for all input boxes. Optional
inputClass	string	Class name(s) for all input boxes. Optional
wrapperStyle	React.CSSProperties	Styling properties for input wrapper. Optional
wrapperClass	string	Class name(s) for input wrapper. Optional

Events

Name	Description
onInput	The callback is triggered as user inputs any character. arg contains the current characters. Optional
onComplete	The callback is triggered when all inputs are completely filled. arg contains the complete characters entered. Optional