react-verification-pin

               

Installation

Install via NPM:

npm install react-verification-pin

Usage

TypeScript

import { VerificationPin, StatusType } from "react-verification-pin";

export const YourComponent: React.FC = () => {
  const [status, setStatus] = useState<StatusType>("process");

  const handleOnFinish = (code: string) => {
    setStatus("wait");

    // simulating a search on your api
    if (code === "111111") {
      setTimeout(() => {
        setStatus("error");
      }, 3000);
    } else {
      setTimeout(() => {
        setStatus("success");
      }, 3000);
    }
  };

  return (
    <VerificationPin
      type="number"
      inputsNumber={6}
      status={status}
      title="Your title here"
      subTitle="Your subtitle here"
      onFinish={handleOnFinish}
    />
  );
};

PropTypes

Key	Type	Description
type	number	number, text, numberAndText
inputsNumber	number	The count of characters
status	StatusType	process, wait, error, success
title	string	Title
subTitle	string	Sub Title
onChange	Function	Trigger on input change
onFinish	Function	Trigger on all character inputs