@siamf/otp-timer 4.5.0 → 5.0.3

package/README.md

@@ -35,7 +35,7 @@ $ npm i @siamf/otp-timer
 ### `OtpTimer` Component
 
 ```javascript
-import { Otptimer } from "@siamf/otp-timer";
+import { OtpTimer } from "@siamf/otp-timer";
 
 const MyComponent = () => {
 
@@ -45,7 +45,15 @@ const MyComponent = () => {
 
   return (
     <div>
-      <Otptimer minutes={0} seconds={5} onResend={handleResend} />
+      <OtpTimer
+          minutes={0}
+          seconds={30}
+          onResend={handleResend}
+          renderText={(props) => <p>You can resend code in {props.minutes} minutes and {props.seconds} seconds</p>}
+          renderButton={(props) => <button {...props}>
+              Send Code Again
+          </button>}
+      />
     </div>
   );
 };
@@ -85,72 +93,8 @@ export default function App() {
 |seconds|number of seconds for which timer must be set|30|
 |minutes|number of minutes for which the timer must be set|0|
 |onResend|function that would get triggered on clicking the resend button|n/a|
-|text|content that you want to put down|Resend otp in|
-|ButtonText|button text|Resend|
-|showSpinner|If you want to show any button loading|false|
-|fetching|If you want to show any button loading icon with fetching state|false|
-|spinnerComponent|Your custom spinner component for render|null|
-
-
-### Styling
-
-<table>
-  <tr>
-    <th> Name </th>
-    <th> Type </th>
-    <th> Description </th>
-  </tr>
-  <tr>
-    <td> containerClass </td>
-    <td> string </td>
-    <td> timer Container class name </td>
-  </tr>
-  <tr>
-    <td> textClass </td>
-    <td> string </td>
-    <td> text class name </td>
-  </tr>
-  <tr>
-    <td> timerClass </td>
-    <td> string </td>
-    <td> timer class name </td>
-  </tr>
-  <tr>
-    <td> buttonContainerClass </td>
-    <td> string </td>
-    <td> button container class </td>
-  </tr>
-  <tr>
-    <td> buttonClass </td>
-    <td> string </td>
-    <td> button class </td>
-  </tr>
-  <tr>
-    <td> buttonStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for resend button </td>
-  </tr>
-  <tr>
-    <td> buttonContainerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for resend button container </td>
-  </tr>
-  <tr>
-    <td> textStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for text </td>
-  </tr>
-  <tr>
-    <td> timerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for timer </td>
-  </tr>
-  <tr>
-    <td> textContainerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for timer text container </td>
-  </tr>
-</table>
+|renderText|Customizable text content(See Example Code)|Required|
+|renderButton|Customizable button content(See Example Code)|Required|
 
 ## `OtpInput` component
 
@@ -267,4 +211,4 @@ You are welcome to create an issue.
 
 - Author - [Siam Ahnaf](https://www.siamahnaf.com/)
 - Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)
-- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)
+- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)

package/dist/cjs/components/OtpTimers.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface OtpTimerProps {
+    minutes?: number;
+    seconds?: number;
+    onResend: () => void;
+    renderText: (props: {
+        minutes: number;
+        seconds: number;
+    }) => React.ReactNode;
+    renderButton: (props: {
+        onClick: () => void;
+    }) => React.ReactElement<HTMLButtonElement>;
+}
+declare const OtpTimer: ({ minutes: initialMinutes, seconds: initialSeconds, onResend, renderText, renderButton, }: OtpTimerProps) => import("react/jsx-runtime").JSX.Element;
+export default OtpTimer;

package/dist/cjs/components/OtpTimers.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OtpTimer = ({ minutes: initialMinutes = 0, seconds: initialSeconds = 30, onResend, renderText, renderButton, }) => {
+    //Error Throwing
+    if (initialSeconds > 59)
+        throw new Error("Seconds cannot be greater than 59");
+    if (initialMinutes > 59)
+        throw new Error("Minutes cannot be greater than 59");
+    //State
+    const [minutes, setMinutes] = (0, react_1.useState)(initialMinutes);
+    const [seconds, setSeconds] = (0, react_1.useState)(initialSeconds);
+    (0, react_1.useEffect)(() => {
+        if (minutes === 0 && seconds === 0)
+            return;
+        const interval = setInterval(() => {
+            if (seconds > 0) {
+                setSeconds((prev) => prev - 1);
+            }
+            else if (minutes > 0) {
+                setMinutes((prev) => prev - 1);
+                setSeconds(59);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [minutes, seconds]);
+    const handleResend = () => {
+        setMinutes(initialMinutes);
+        setSeconds(initialSeconds);
+        onResend();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: minutes === 0 && seconds === 0
+            ? renderButton({ onClick: handleResend })
+            : renderText({ minutes, seconds }) }));
+};
+exports.default = OtpTimer;
+//# sourceMappingURL=OtpTimers.js.map

package/dist/cjs/components/OtpTimers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpTimers.js","sourceRoot":"","sources":["../../../src/components/OtpTimers.tsx"],"names":[],"mappings":";;;AAAA,iCAA6D;AAU7D,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,GAAkB,EAAE,EAAE;IACnI,gBAAgB;IAChB,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAC9E,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAE9E,OAAO;IACP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,cAAc,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAAE,OAAO;QAE3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACrB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,gBAAQ,cACJ,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAC3B,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;YACzC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAC/B,CACd,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/dist/cjs/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpTimer } from "./components/OtpTimers";
 export { default as OtpInput } from "./components/OtpInput";

package/dist/cjs/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OtpInput = exports.Otptimer = void 0;
-var Otptimer_1 = require("./components/Otptimer");
-Object.defineProperty(exports, "Otptimer", { enumerable: true, get: function () { return __importDefault(Otptimer_1).default; } });
+exports.OtpInput = exports.OtpTimer = void 0;
+var OtpTimers_1 = require("./components/OtpTimers");
+Object.defineProperty(exports, "OtpTimer", { enumerable: true, get: function () { return __importDefault(OtpTimers_1).default; } });
 var OtpInput_1 = require("./components/OtpInput");
 Object.defineProperty(exports, "OtpInput", { enumerable: true, get: function () { return __importDefault(OtpInput_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA4D;AAAnD,qHAAA,OAAO,OAAY;AAC5B,kDAA4D;AAAnD,qHAAA,OAAO,OAAY"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,oDAA6D;AAApD,sHAAA,OAAO,OAAY;AAC5B,kDAA4D;AAAnD,qHAAA,OAAO,OAAY"}

package/dist/esm/components/OtpTimers.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface OtpTimerProps {
+    minutes?: number;
+    seconds?: number;
+    onResend: () => void;
+    renderText: (props: {
+        minutes: number;
+        seconds: number;
+    }) => React.ReactNode;
+    renderButton: (props: {
+        onClick: () => void;
+    }) => React.ReactElement<HTMLButtonElement>;
+}
+declare const OtpTimer: ({ minutes: initialMinutes, seconds: initialSeconds, onResend, renderText, renderButton, }: OtpTimerProps) => import("react/jsx-runtime").JSX.Element;
+export default OtpTimer;

package/dist/esm/components/OtpTimers.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, Fragment } from "react";
+const OtpTimer = ({ minutes: initialMinutes = 0, seconds: initialSeconds = 30, onResend, renderText, renderButton, }) => {
+    //Error Throwing
+    if (initialSeconds > 59)
+        throw new Error("Seconds cannot be greater than 59");
+    if (initialMinutes > 59)
+        throw new Error("Minutes cannot be greater than 59");
+    //State
+    const [minutes, setMinutes] = useState(initialMinutes);
+    const [seconds, setSeconds] = useState(initialSeconds);
+    useEffect(() => {
+        if (minutes === 0 && seconds === 0)
+            return;
+        const interval = setInterval(() => {
+            if (seconds > 0) {
+                setSeconds((prev) => prev - 1);
+            }
+            else if (minutes > 0) {
+                setMinutes((prev) => prev - 1);
+                setSeconds(59);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [minutes, seconds]);
+    const handleResend = () => {
+        setMinutes(initialMinutes);
+        setSeconds(initialSeconds);
+        onResend();
+    };
+    return (_jsx(Fragment, { children: minutes === 0 && seconds === 0
+            ? renderButton({ onClick: handleResend })
+            : renderText({ minutes, seconds }) }));
+};
+export default OtpTimer;
+//# sourceMappingURL=OtpTimers.js.map

package/dist/esm/components/OtpTimers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpTimers.js","sourceRoot":"","sources":["../../../src/components/OtpTimers.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU7D,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,GAAkB,EAAE,EAAE;IACnI,gBAAgB;IAChB,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAC9E,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAE9E,OAAO;IACP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAAE,OAAO;QAE3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACrB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,QAAQ,cACJ,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAC3B,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;YACzC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAC/B,CACd,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpTimer } from "./components/OtpTimers";
 export { default as OtpInput } from "./components/OtpInput";

package/dist/esm/index.js

@@ -1,3 +1,3 @@
-export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpTimer } from "./components/OtpTimers";
 export { default as OtpInput } from "./components/OtpInput";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siamf/otp-timer",
-  "version": "4.5.0",
+  "version": "5.0.3",
   "description": "A simple react otp timer component with resend functionality🤷",
   "homepage": "https://github.com/siamahnaf/otp-timer",
   "main": "dist/cjs/index.js",

package/dist/cjs/components/Otptimer.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-interface Props {
-    seconds?: number;
-    minutes?: number;
-    text?: string;
-    buttonText?: string;
-    containerClass?: string;
-    buttonContainerClass?: string;
-    textClass?: string;
-    timerClass?: string;
-    buttonStyle?: React.CSSProperties;
-    buttonClass?: string;
-    textStyle?: React.CSSProperties;
-    timerStyle?: React.CSSProperties;
-    buttonContainerStyle?: React.CSSProperties;
-    textContainerStyle?: React.CSSProperties;
-    onResend: () => void;
-    fetching?: boolean;
-    showSpinner?: boolean;
-    spinnerComponent?: React.ReactNode;
-}
-declare const Otptimer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Otptimer;

package/dist/cjs/components/Otptimer.js

@@ -1,51 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const Otptimer = (props) => {
-    //From props
-    const { text = "Resend otp in", containerClass = "otp-timer-container", buttonText = "Resend", textClass = "otp-text", buttonContainerClass = "button-container", timerClass = "otp-timer", buttonStyle, buttonContainerStyle, timerStyle, textStyle, textContainerStyle, onResend, fetching = false, buttonClass, showSpinner = false, spinnerComponent } = props;
-    //State
-    const [minutes, setMinutes] = react_1.default.useState(props.minutes ? props.minutes : 0);
-    const [seconds, setSeconds] = react_1.default.useState(props.seconds ? props.seconds : 30);
-    //Handler
-    let myInterval;
-    const onTimeHandler = () => {
-        myInterval = setInterval(() => {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            if (seconds === 0) {
-                if (minutes === 0) {
-                    clearInterval(myInterval);
-                }
-                else {
-                    setMinutes(minutes - 1);
-                    setSeconds(59);
-                }
-            }
-        }, 1000);
-    };
-    //Effect
-    react_1.default.useEffect(() => {
-        onTimeHandler();
-        return () => clearInterval(myInterval);
-    });
-    //Handler
-    const resendHandler = () => {
-        setSeconds(props.seconds ? props.seconds : 30);
-        setMinutes(props.minutes ? props.minutes : 0);
-        onTimeHandler();
-        onResend();
-    };
-    //Styling
-    const ButtonStyles = Object.assign({ border: "none", background: "none", cursor: "pointer", padding: 0, margin: 0 }, buttonStyle);
-    const textContainerStyles = Object.assign({ fontSize: "15px" }, textContainerStyle);
-    return ((0, jsx_runtime_1.jsx)("div", { children: minutes === 0 && seconds === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: buttonContainerClass, style: buttonContainerStyle, children: (0, jsx_runtime_1.jsxs)("button", { onClick: resendHandler, className: buttonClass, style: ButtonStyles, children: [(0, jsx_runtime_1.jsx)("span", { children: buttonText }), showSpinner && fetching &&
-                        spinnerComponent] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: containerClass, style: textContainerStyles, children: [(0, jsx_runtime_1.jsx)("span", { className: textClass, style: textStyle, children: text }), " ", (0, jsx_runtime_1.jsxs)("span", { className: timerClass, style: timerStyle, children: [(0, jsx_runtime_1.jsx)("span", { children: minutes < 10 ? `0${minutes}` : minutes }), ":", (0, jsx_runtime_1.jsx)("span", { children: seconds < 10 ? `0${seconds}` : seconds })] })] })) }));
-};
-exports.default = Otptimer;
-//# sourceMappingURL=Otptimer.js.map

package/dist/cjs/components/Otptimer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Otptimer.js","sourceRoot":"","sources":["../../../src/components/Otptimer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/Otptimer.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-interface Props {
-    seconds?: number;
-    minutes?: number;
-    text?: string;
-    buttonText?: string;
-    containerClass?: string;
-    buttonContainerClass?: string;
-    textClass?: string;
-    timerClass?: string;
-    buttonStyle?: React.CSSProperties;
-    buttonClass?: string;
-    textStyle?: React.CSSProperties;
-    timerStyle?: React.CSSProperties;
-    buttonContainerStyle?: React.CSSProperties;
-    textContainerStyle?: React.CSSProperties;
-    onResend: () => void;
-    fetching?: boolean;
-    showSpinner?: boolean;
-    spinnerComponent?: React.ReactNode;
-}
-declare const Otptimer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Otptimer;

package/dist/esm/components/Otptimer.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-const Otptimer = (props) => {
-    //From props
-    const { text = "Resend otp in", containerClass = "otp-timer-container", buttonText = "Resend", textClass = "otp-text", buttonContainerClass = "button-container", timerClass = "otp-timer", buttonStyle, buttonContainerStyle, timerStyle, textStyle, textContainerStyle, onResend, fetching = false, buttonClass, showSpinner = false, spinnerComponent } = props;
-    //State
-    const [minutes, setMinutes] = React.useState(props.minutes ? props.minutes : 0);
-    const [seconds, setSeconds] = React.useState(props.seconds ? props.seconds : 30);
-    //Handler
-    let myInterval;
-    const onTimeHandler = () => {
-        myInterval = setInterval(() => {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            if (seconds === 0) {
-                if (minutes === 0) {
-                    clearInterval(myInterval);
-                }
-                else {
-                    setMinutes(minutes - 1);
-                    setSeconds(59);
-                }
-            }
-        }, 1000);
-    };
-    //Effect
-    React.useEffect(() => {
-        onTimeHandler();
-        return () => clearInterval(myInterval);
-    });
-    //Handler
-    const resendHandler = () => {
-        setSeconds(props.seconds ? props.seconds : 30);
-        setMinutes(props.minutes ? props.minutes : 0);
-        onTimeHandler();
-        onResend();
-    };
-    //Styling
-    const ButtonStyles = Object.assign({ border: "none", background: "none", cursor: "pointer", padding: 0, margin: 0 }, buttonStyle);
-    const textContainerStyles = Object.assign({ fontSize: "15px" }, textContainerStyle);
-    return (_jsx("div", { children: minutes === 0 && seconds === 0 ? (_jsx("div", { className: buttonContainerClass, style: buttonContainerStyle, children: _jsxs("button", { onClick: resendHandler, className: buttonClass, style: ButtonStyles, children: [_jsx("span", { children: buttonText }), showSpinner && fetching &&
-                        spinnerComponent] }) })) : (_jsxs("div", { className: containerClass, style: textContainerStyles, children: [_jsx("span", { className: textClass, style: textStyle, children: text }), " ", _jsxs("span", { className: timerClass, style: timerStyle, children: [_jsx("span", { children: minutes < 10 ? `0${minutes}` : minutes }), ":", _jsx("span", { children: seconds < 10 ? `0${seconds}` : seconds })] })] })) }));
-};
-export default Otptimer;
-//# sourceMappingURL=Otptimer.js.map

package/dist/esm/components/Otptimer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Otptimer.js","sourceRoot":"","sources":["../../../src/components/Otptimer.tsx"],"names":[],"mappings":"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"}