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 |