0.2.0 • Published 3 years ago

react-verification-pin v0.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

KeyTypeDescription
typenumbernumber, text, numberAndText
inputsNumbernumberThe count of characters
statusStatusTypeprocess, wait, error, success
titlestringTitle
subTitlestringSub Title
onChangeFunctionTrigger on input change
onFinishFunctionTrigger on all character inputs