react-custom-otp

A React component library for adding OTP (One-Time Password) functionality to your project.

Install

npm install --save react-custom-otp

Usage

import React, { useState } from 'react'

import { OTP } from 'react-custom-otp'
import 'react-custom-otp/dist/index.css'

const Example = () => {
  const [stringCode , setStringCode] = useState("")
    return (
      <OTP
        setStringCode={setStringCode}
        inputsNumber={5}
      />
    )
}

Props/Options

| Prop | Type | Description | Required | |-----------------|------------------------------------------------|-------------------------------------------------------------------------|----------| | inputsNumber | number | The number of OTP input fields to render. | Required | | separator | ReactElement | The separator element to use between each OTP digit. | Optional | | setStringCode | React.Dispatch<React.SetStateAction> | A callback function to handle the entered OTP as a string. | Required | | setSubmitStatus | React.Dispatch<React.SetStateAction> | A callback function to handle the submit status of the OTP component, if returns True it means all the input fields have been filled. | Optional | | inputsClasses | string | CSS classes to apply to the input fields. | Optional | | inputsStyles | CSSProperties | Inline styles to apply to the input fields. | Optional | | containerClasses| string | CSS classes to apply to the container element. | Optional | | containerStyles | CSSProperties | Inline styles to apply to the container element. | Optional |

Full example

import React, { useState } from 'react';
import { OTP } from 'react-custom-otp';
import 'react-custom-otp/dist/index.css';

const Example = () => {
  const [stringCode, setStringCode] = useState('');
  const [submitStatus, setSubmitStatus] = useState(false);

  return (
    <OTP
      inputsClasses="custom-inputs"
      inputsStyles={{ background: '#f1f1f1', color: '#333' }}
      containerClasses="otp-container"
      containerStyles={{ background: '#ccc' }}
      inputsNumber={6}
      setStringCode={setStringCode}
      setSubmitStatus={setSubmitStatus}
      separator={<span>-</span>}
    />
  );
};

The react-custom-otp library is designed to simplify the process of adding OTP functionality to your React projects. It provides an OTP component that can be easily integrated into your codebase.

To install the library, use the provided npm command, as shown in the "Install" section. Make sure to import the necessary components and the CSS file to enable the styling.

The useState hook is used to manage the stringCode state, which holds the entered OTP value. The setStringCode function is passed as a prop to the OTP component to update the value as the user inputs the OTP.

Feel free to explore the library and customize it according to your needs!

License

MIT © Hadi Raziei