import { useState } from "react";
import { OtpKit } from "react-otp-kit";
import "react-otp-kit/dist/index.css";

function App() {
  const [otp, setOtp] = useState("");

  const handleChange = (newOtp: string) => {
    setOtp(newOtp);
  };

  return (
    <>
      <OtpKit value={otp} onChange={handleChange} type={"number"} />
    </>
  );
}

export default App;

import { useState } from "react";
import { OtpKitResendCode } from "react-otp-kit";

function App() {
  const [localOtp, setLocalOtp] = useState("");
  const [apiOtp, setApiOtp] = useState("");

  const handleLocalResponseData = (data: any) => {
    setLocalOtp(data);
  };

  const handleApiResponseData = (data: any) => {
    setApiOtp(data.otp);
  };

  // Example: locally generating random codes as OTP
  const generateRandomDigits = () => {
    let result = "";
    const characters = "0123456789";
    const length = 6;
    for (let i = 0; i < length; i++) {
      result += characters.charAt(
        Math.floor(Math.random() * characters.length)
      );
    }
    return result;
  };

  return (
    <>
      <OtpKitResendCode
        resendOtpButton={{
          localFunctions: generateRandomDigits,
          initialCountdown: 10,
          text: "Resend code (Local)",
          className: "resendbutton__styles",
          responseData: handleLocalResponseData, // Pass the function to handle response data
        }}
      />
      <p>Generated Local OTP: {localOtp}</p>
      <OtpKitResendCode
        resendOtpButton={{
          apiURL:
            "https://run.mocky.io/v3/5b8c2be7-ae6d-4ca4-9ece-fe5d96fdb120",
          initialCountdown: 10,
          text: "Resend code (API)",
          className: "resendbutton__styles",
          responseData: handleApiResponseData, // Pass the function to handle response data
        }}
      />
      <p>Generated API OTP: {apiOtp}</p>
    </>
  );
}

export default App;