Mroom-UI: OTP Component for react

🔑 A simple One Time Password verification input for your react application.

Installation

bower install mroom-react-otp-input

# or

npm install mroom-react-otp-input

Example

import React from "react";
import OneTimePasswordInput from "./components/OneTimePasswordInput";

function App() {
  return (
    <OneTimePasswordInput onVerifyCode={(input) => input === "000000"} />
  );
}

export default App;

Features

• Configure inputs numbers based on your needs.
• Supports tab and backspace keyboard events.

API

| Props | Type | Description | Default | | ------------------------- | -------- | -------------------------------------------------------------------------------------------------- | ------- | | digitInputCount | Number | Specify how many input you want for your otp verification length | 6 | | disableVerificationStatus | Boolean | Hide the verification status below the digit inputs. | false | | wrapperStyle | Object | Customize the global wrapper style containing the inputs | {} | | inputStyle | Object | Customize the style of the inputs | {} | | onVerifyCode | function | A callback function required to use in order to verify the input with a backend verification code. | - |

TODOS

• [] Migrate it to typescript
• [] Improve performance.
• [] Write tests

Note

This is my first time building a small component for the open-source 🌎. I will be so thunkfull 🙏 if you send me your feedback and recommendations.

Socials

Made with ❤️ by Mounir Hamzaoui