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 |

NPM Package

GitHub Repo: https://github.com/dustyjay/otp-input