react-verification-pin

A library React JS to verify the PIN code

Usage no npm install needed!

<script type="module">
  import reactVerificationPin from 'https://cdn.skypack.dev/react-verification-pin';
</script>

README

react-verification-pin

      NPM         MIT  

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