Package Exports

@akashch/otp-input
@akashch/otp-input/dist/index.cjs.js
@akashch/otp-input/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@akashch/otp-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@akashch/otp-input

[]

A fully customizable, one-time password input component for the web built with React.

Installation

To install the latest stable version:

npm install --save @akashch/otp-input

Basic usage:

import React, { useState } from "react";
import OtpInput from "@akashch/otp-input";
export default function App() {
  const [otp, setOtp] = useState("");
  return (
    <OtpInput
      numValues={6}
      inputClass={"any-class"}
      parentClass={"any-parent-class"}
      onChange={(otp) => {
        setOtp(otp);
      }}
      type={"number"}
    />
  );
}

API

You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.

Name	Type	Required	Default	Description
numValues	number	false	4	Number of inputs to be rendered.
onChange	function	true	console.log	Returns OTP code typed in inputs.
separator	Any Character	false	none	Provide a custom separator between inputs by passing a component. For instance, `<span>-</span>` would add `-` between each input.
inputClass	className (string)	false	none	Style applied or class passed to parent of inputs.
inputClass	className (string)	false	none	class passed to each input.
inputType	<input> type	false	number	The type of the input that will be passed to the input element being rendered. In v2 `isInputNum` used to set the input type as `tel` and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type `number`. That behaviour is still supported if you pass `tel` to the inputType prop.

Development

To run the vite example:

cd example
npm run dev

Checklist

Write tests
Add actions for lint checks and tests

Contributing

Feel free to open issues and pull requests!

License

This project follows the all-contributors specification. Contributions of any kind welcome!