otp-timer 2.1.0 → 3.0.0

package/README.md

@@ -1,62 +1,79 @@
-# otp-timer
-
-## Install
-
-Install by executing either `npm install otp-timer` or `yarn add otp-timer`
-
-## Demo
-
-[react-otp-timer](https://react-otp-timer.herokuapp.com/ "react-otp-timer")
-
-## Usage?
-
-```
-import OtpTimer from 'otp-timer'
-import React, { Component } from "react";
-
- handleClick=()=>{
-   //desired function to be performed on clicking resend button
- }
-
-export default  class Otp extends Component {
-  render () {
-    return (
-      <div>
-        <Timer seconds= {30} minutes={0} resend={this.handleClick} />
-      </div>
-    )
-  }
-}
-
-
-```
-
-## User Guide?
-
-Functionality:
-
-| Prop name  |                           Description                           | Default Value |                Example |
-| :--------- | :-------------------------------------------------------------: | :-----------: | ---------------------: |
-| seconds    |          number of seconds for which timer must be set          |      30       |           seconds={20} |
-| minutes    |        number of minutes for which the timer must be set        |       0       |            minutes={1} |
-| resend     | function that would get triggered on clicking the resend button |      n/a      | resend={function name} |
-| text       |                content that you want to put down                |  Time Left :  |       text="Time Left" |
-| ButtonText |                         button content                          |    Resend     |    ButtonText="Resend" |
-
-Styling:
-
-| Prop name       |                 Description                 | Default Value |             Example             |
-| :-------------- | :-----------------------------------------: | :-----------: | ------------------------------: |
-| textColor       |      describes the timer's text color       |   "#000000"   | textColor={"#000000"}           |
-| buttonColor     |      describes the button's text color      |    "#fff"     | buttonColor={"#fff"}            |
-| background      | describe the background color of the button |   "#0033cc"   | background={"#0033cc"}          |
-| buttonClassName |    describe custom classname for button     |      n/a      | buttonClassName="btnClass"      |
-| buttonStyle     |     describe custome styles for button      |       -       | buttonStyle={{color:"#fff"}}    |
-| timerSpanClass  |   describe custom classname for timerspan   |       -       | timerSpanClass="timerClass"     |
-| timerSpanStyle  |    describe custom styles for timerspan     |       -       | timerSpanStyle={{font:"Inter"}} |
-
----
-
-## License
-
-MIT © [Simran Gupta](https://github.com/SimranGupta) & [Tanmay Sharma](https://github.com/927tanmay)
+# otp-timer
+
+[![npm](https://img.shields.io/npm/v/otp-timer)](https://www.npmjs.com/package/otp-timer)
+[![CI](https://github.com/927tanmay/otp-timer/actions/workflows/ci.yml/badge.svg)](https://github.com/927tanmay/otp-timer/actions/workflows/ci.yml)
+[![license](https://img.shields.io/npm/l/otp-timer)](./LICENSE)
+
+A tiny React countdown timer for OTP screens. It counts down, then swaps itself for a **Resend** button that restarts the timer.
+
+- Works with React 16.8 through 19
+- Zero dependencies, ~2 KB
+- TypeScript types included
+- ESM and CommonJS builds
+
+## Demo
+
+[927tanmay.github.io/otp-timer](https://927tanmay.github.io/otp-timer/)
+
+## Install
+
+```bash
+npm install otp-timer
+```
+
+## Usage
+
+```jsx
+import OtpTimer from "otp-timer";
+
+export default function VerifyOtp() {
+  const handleResend = () => {
+    // request a new OTP here
+  };
+
+  return <OtpTimer minutes={1} seconds={0} resend={handleResend} />;
+}
+```
+
+A named export is also available: `import { OtpTimer } from "otp-timer"`.
+
+## Props
+
+### Behaviour
+
+| Prop         | Description                                                    | Default        | Example                     |
+| :----------- | :------------------------------------------------------------- | :------------- | :-------------------------- |
+| `minutes`    | Minutes to count down from                                     | `0`            | `minutes={1}`               |
+| `seconds`    | Seconds to count down from (values over 59 roll into minutes)  | `30`           | `seconds={20}`              |
+| `resend`     | Called when the resend button is clicked; the timer restarts   | –              | `resend={handleResend}`     |
+| `text`       | Label shown before the countdown                               | `"Time left:"` | `text="Code expires in"`    |
+| `ButtonText` | Resend button content                                          | `"Resend"`     | `ButtonText="Send again"`   |
+
+### Styling
+
+| Prop              | Description                     | Default     | Example                            |
+| :---------------- | :------------------------------ | :---------- | :--------------------------------- |
+| `textColor`       | Timer text color                | `"#000000"` | `textColor="#333"`                 |
+| `buttonColor`     | Resend button text color        | `"#fff"`    | `buttonColor="#fff"`               |
+| `background`      | Resend button background color  | `"#0033cc"` | `background="#0033cc"`             |
+| `buttonClassName` | Class name for the button       | –           | `buttonClassName="btn"`            |
+| `buttonStyle`     | Inline styles for the button    | –           | `buttonStyle={{ padding: 8 }}`     |
+| `timerSpanClass`  | Class name for the timer text   | –           | `timerSpanClass="timer"`           |
+| `timerSpanStyle`  | Inline styles for the timer text| –           | `timerSpanStyle={{ fontWeight: 600 }}` |
+
+## Upgrading from v2
+
+See [CHANGELOG.md](./CHANGELOG.md#300). For most apps, no code changes are needed.
+
+## Development
+
+```bash
+npm install
+npm run dev     # example app at http://localhost:5173
+npm test
+npm run build
+```
+
+## License
+
+MIT © [Simran Gupta](https://github.com/1209simran) & [Tanmay Sharma](https://github.com/927tanmay)

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface OtpTimerProps {
+    /** Minutes to count down from. Default: 0 */
+    minutes?: number;
+    /** Seconds to count down from. Values above 59 roll over into minutes. Default: 30 */
+    seconds?: number;
+    /** Called when the resend button is clicked, before the timer restarts. */
+    resend?: () => void;
+    /** Label shown before the countdown. Default: "Time left:" */
+    text?: ReactNode;
+    /** Resend button content. Default: "Resend" */
+    ButtonText?: ReactNode;
+    /** Timer text color. Default: "#000000" */
+    textColor?: string;
+    /** Resend button text color. Default: "#fff" */
+    buttonColor?: string;
+    /** Resend button background color. Default: "#0033cc" */
+    background?: string;
+    buttonClassName?: string;
+    buttonStyle?: CSSProperties;
+    timerSpanClass?: string;
+    timerSpanStyle?: CSSProperties;
+}
+declare function OtpTimer({ minutes, seconds, resend, text, ButtonText, textColor, buttonColor, background, buttonClassName, buttonStyle, timerSpanClass, timerSpanStyle, }: OtpTimerProps): React.JSX.Element;
+
+export { OtpTimer, type OtpTimerProps, OtpTimer as default };

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import React, { ReactNode, CSSProperties } from 'react';
+
+interface OtpTimerProps {
+    /** Minutes to count down from. Default: 0 */
+    minutes?: number;
+    /** Seconds to count down from. Values above 59 roll over into minutes. Default: 30 */
+    seconds?: number;
+    /** Called when the resend button is clicked, before the timer restarts. */
+    resend?: () => void;
+    /** Label shown before the countdown. Default: "Time left:" */
+    text?: ReactNode;
+    /** Resend button content. Default: "Resend" */
+    ButtonText?: ReactNode;
+    /** Timer text color. Default: "#000000" */
+    textColor?: string;
+    /** Resend button text color. Default: "#fff" */
+    buttonColor?: string;
+    /** Resend button background color. Default: "#0033cc" */
+    background?: string;
+    buttonClassName?: string;
+    buttonStyle?: CSSProperties;
+    timerSpanClass?: string;
+    timerSpanStyle?: CSSProperties;
+}
+declare function OtpTimer({ minutes, seconds, resend, text, ButtonText, textColor, buttonColor, background, buttonClassName, buttonStyle, timerSpanClass, timerSpanStyle, }: OtpTimerProps): React.JSX.Element;
+
+export { OtpTimer, type OtpTimerProps, OtpTimer as default };

package/dist/index.js

@@ -0,0 +1,115 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OtpTimer: () => OtpTimer,
+  default: () => OtpTimer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/OtpTimer.tsx
+var import_react = __toESM(require("react"));
+var { useEffect, useRef, useState } = import_react.default;
+var pad = (n) => String(n).padStart(2, "0");
+var toNumber = (value, fallback) => {
+  if (value === null || value === void 0 || value === "") return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+function OtpTimer({
+  minutes,
+  seconds,
+  resend,
+  text,
+  ButtonText,
+  textColor,
+  buttonColor,
+  background,
+  buttonClassName,
+  buttonStyle,
+  timerSpanClass,
+  timerSpanStyle
+}) {
+  const total = Math.max(
+    0,
+    Math.floor(toNumber(minutes, 0) * 60 + toNumber(seconds, 30))
+  );
+  const [remaining, setRemaining] = useState(total);
+  const [cycle, setCycle] = useState(0);
+  const durationRef = useRef(total);
+  useEffect(() => {
+    const duration = durationRef.current;
+    if (duration <= 0) return;
+    const deadline = Date.now() + duration * 1e3;
+    const id = setInterval(() => {
+      const left = Math.max(0, Math.round((deadline - Date.now()) / 1e3));
+      setRemaining(left);
+      if (left === 0) clearInterval(id);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [cycle]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    resend == null ? void 0 : resend();
+    durationRef.current = total;
+    setRemaining(total);
+    setCycle((c) => c + 1);
+  };
+  const textStyle = {
+    fontSize: "16px",
+    fontFamily: "Roboto",
+    lineHeight: "22px",
+    color: textColor || "#000000"
+  };
+  const buttonStyling = {
+    border: "none",
+    cursor: "pointer",
+    background: background || "#0033cc",
+    color: buttonColor || "#fff",
+    fontSize: "16px",
+    lineHeight: "22px",
+    ...buttonStyle
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: textStyle }, remaining === 0 ? /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      style: buttonStyling,
+      onClick: handleClick,
+      className: buttonClassName
+    },
+    ButtonText ? /* @__PURE__ */ import_react.default.createElement("span", null, ButtonText, " ") : /* @__PURE__ */ import_react.default.createElement("span", null, "Resend")
+  ) : /* @__PURE__ */ import_react.default.createElement("span", { role: "timer", className: timerSpanClass, style: timerSpanStyle }, /* @__PURE__ */ import_react.default.createElement("span", null, text || "Time left:", " "), pad(Math.floor(remaining / 60)), ":", pad(remaining % 60)));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OtpTimer
+});

package/dist/index.mjs

@@ -0,0 +1,78 @@
+// src/OtpTimer.tsx
+import React from "react";
+var { useEffect, useRef, useState } = React;
+var pad = (n) => String(n).padStart(2, "0");
+var toNumber = (value, fallback) => {
+  if (value === null || value === void 0 || value === "") return fallback;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+function OtpTimer({
+  minutes,
+  seconds,
+  resend,
+  text,
+  ButtonText,
+  textColor,
+  buttonColor,
+  background,
+  buttonClassName,
+  buttonStyle,
+  timerSpanClass,
+  timerSpanStyle
+}) {
+  const total = Math.max(
+    0,
+    Math.floor(toNumber(minutes, 0) * 60 + toNumber(seconds, 30))
+  );
+  const [remaining, setRemaining] = useState(total);
+  const [cycle, setCycle] = useState(0);
+  const durationRef = useRef(total);
+  useEffect(() => {
+    const duration = durationRef.current;
+    if (duration <= 0) return;
+    const deadline = Date.now() + duration * 1e3;
+    const id = setInterval(() => {
+      const left = Math.max(0, Math.round((deadline - Date.now()) / 1e3));
+      setRemaining(left);
+      if (left === 0) clearInterval(id);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [cycle]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    resend == null ? void 0 : resend();
+    durationRef.current = total;
+    setRemaining(total);
+    setCycle((c) => c + 1);
+  };
+  const textStyle = {
+    fontSize: "16px",
+    fontFamily: "Roboto",
+    lineHeight: "22px",
+    color: textColor || "#000000"
+  };
+  const buttonStyling = {
+    border: "none",
+    cursor: "pointer",
+    background: background || "#0033cc",
+    color: buttonColor || "#fff",
+    fontSize: "16px",
+    lineHeight: "22px",
+    ...buttonStyle
+  };
+  return /* @__PURE__ */ React.createElement("div", { style: textStyle }, remaining === 0 ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      style: buttonStyling,
+      onClick: handleClick,
+      className: buttonClassName
+    },
+    ButtonText ? /* @__PURE__ */ React.createElement("span", null, ButtonText, " ") : /* @__PURE__ */ React.createElement("span", null, "Resend")
+  ) : /* @__PURE__ */ React.createElement("span", { role: "timer", className: timerSpanClass, style: timerSpanStyle }, /* @__PURE__ */ React.createElement("span", null, text || "Time left:", " "), pad(Math.floor(remaining / 60)), ":", pad(remaining % 60)));
+}
+export {
+  OtpTimer,
+  OtpTimer as default
+};

package/package.json

@@ -1,52 +1,74 @@
 {
   "name": "otp-timer",
-  "version": "2.1.0",
-  "description": "otp timer component",
-  "main": "lib/timer.js",
+  "version": "3.0.0",
+  "description": "Lightweight React OTP countdown timer with a resend button",
   "author": "Simran Gupta & Tanmay Sharma",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/927tanmay/otp-timer.git"
+    "url": "git+https://github.com/927tanmay/otp-timer.git"
   },
-  "peerDependencies": {
-    "react": "^16.0.0"
-  },
-  "dependencies": {
-    "prop-types": "^15.6.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+  "homepage": "https://github.com/927tanmay/otp-timer#readme",
+  "bugs": {
+    "url": "https://github.com/927tanmay/otp-timer/issues"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.23.0",
-    "@babel/preset-react": "^7.22.5",
-    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.3",
-    "css-loader": "^7.1.2",
-    "enzyme": "3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "html-webpack-plugin": "^5.5.3",
-    "jest": "^29.7.0",
-    "jsdom": "13.2.0",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.0"
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
   },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
   "scripts": {
-    "build": "babel src --out-dir lib",
-    "dev": "webpack serve --mode development --port 3001 --hot --config example/webpack.config.js",
-    "test": "jest"
+    "build": "tsup",
+    "dev": "vite example",
+    "build:example": "vite build example",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm test",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
   },
   "keywords": [
     "react",
     "react-component",
-    "otptimer",
     "otp",
     "otp-timer",
-    "timer",
-    "reactotptimer"
-  ]
+    "otptimer",
+    "resend-otp",
+    "countdown",
+    "timer"
+  ],
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^29.1.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
+  },
+  "overrides": {
+    "esbuild": "^0.28.2"
+  }
 }

package/.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env"
-    ],
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    // "transform-object-rest-spread",
-    // "transform-react-jsx"
-
-  ]
-}

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "git.ignoreLimitWarning": true
-}

package/example/index.css

@@ -1,3 +0,0 @@
-.btn {
-    color:red !important;
-}

package/example/index.html

@@ -1,9 +0,0 @@
-<html>
-  <head>
-	  <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Example</title>
-  </head>
-  <body>
-  	<div id="root"></div>
-  </body>
-</html>

package/example/index.js

@@ -1,28 +0,0 @@
-import OtpTimer from "../lib/timer";
-import ReactDOM from "react-dom";
-import React, { Component, PropTypes } from "react";
-import './index.css'
-
-class Example extends Component {
-  submit() {
-    console.log("button clicked");
-  }
-  render() {
-    return (
-      <div>
-        <OtpTimer
-          seconds={2}
-          minutes={0}
-          resend={this.submit.bind(this)}
-          text="Time:"
-          ButtonText="Resend"
-          timerSpanClass= "btn"
-          timerSpanStyle={{ fontSize: "16px" }}
-          buttonStyle={{ backgroundColor: "lightBlue" }}
-        />
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<Example />, document.getElementById("root"));

package/example/webpack.config.js

@@ -1,23 +0,0 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-module.exports = {
-  entry: ['./example/index.js'],
-  devtool: 'inline-source-map',
-  output: { filename: 'bundle.js', publicPath: '' },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react'] } } ],
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"],
-      },
-    ]
-  },
-  plugins: [
-    new HtmlWebpackPlugin({ title: 'react infinite loader example', template: './example/index.html' })
-  ],
-}

package/lib/timer.js

@@ -1,136 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-var Otp = exports["default"] = /*#__PURE__*/function (_Component) {
-  function Otp(props) {
-    var _this;
-    _classCallCheck(this, Otp);
-    _this = _callSuper(this, Otp, [props]);
-    _this.state = {
-      showfield: false,
-      minutes: _this.props.minutes ? _this.props.minutes : 0,
-      seconds: _this.props.seconds ? _this.props.seconds : 30
-    };
-    _this.handleClick = _this.handleClick.bind(_this);
-    return _this;
-  }
-  _inherits(Otp, _Component);
-  return _createClass(Otp, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      clearInterval(this.myInterval);
-      this.otptimer();
-    }
-  }, {
-    key: "otptimer",
-    value: function otptimer() {
-      var _this2 = this;
-      clearInterval(this.myInterval);
-      this.myInterval = setInterval(function () {
-        var _this2$state = _this2.state,
-          seconds = _this2$state.seconds,
-          minutes = _this2$state.minutes;
-        if (seconds > 0) {
-          _this2.setState(function (_ref) {
-            var seconds = _ref.seconds;
-            return {
-              seconds: seconds - 1
-            };
-          });
-        }
-        if (seconds === 0) {
-          if (minutes === 0) {
-            clearInterval(_this2.myInterval);
-          } else {
-            _this2.setState(function (_ref2) {
-              var minutes = _ref2.minutes;
-              return {
-                minutes: minutes - 1,
-                seconds: 59
-              };
-            });
-          }
-        }
-      }, 1000);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearInterval(this.myInterval);
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick(event) {
-      this.setState({
-        minutes: this.props.minutes ? this.props.minutes : 0,
-        seconds: this.props.seconds ? this.props.seconds : 30
-      });
-      this.props.resend();
-      this.otptimer();
-      event.preventDefault();
-    }
-    //   wrapperFunction(e){
-    //     this.props.resend;
-    //     this.handleClick.bind(this);
-    // }
-  }, {
-    key: "render",
-    value: function render() {
-      var textStyle = {
-        fontSize: "16px",
-        fontFamily: "Roboto",
-        lineHeight: "22px",
-        color: this.props.textColor ? this.props.textColor : "#000000"
-      };
-      var buttonStyling = {
-        border: "none",
-        cursor: "pointer",
-        background: this.props.background ? this.props.background : "#0033cc",
-        color: this.props.buttonColor ? this.props.buttonColor : "#fff",
-        fontSize: "16px",
-        lineHeight: "22px"
-      };
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        style: textStyle
-      }, this.state.minutes === 0 && this.state.seconds === 0 ? /*#__PURE__*/_react["default"].createElement("button", {
-        style: _objectSpread(_objectSpread({}, buttonStyling), this.props.buttonStyle),
-        onClick: this.handleClick,
-        className: this.props.buttonClassName
-      }, this.props.ButtonText ? /*#__PURE__*/_react["default"].createElement("span", null, this.props.ButtonText, " ") : /*#__PURE__*/_react["default"].createElement("span", null, "Resend")) : /*#__PURE__*/_react["default"].createElement("span", {
-        className: this.props.timerSpanClass,
-        style: this.props.timerSpanStyle
-      }, this.props.text ? /*#__PURE__*/_react["default"].createElement("span", null, this.props.text, " ") : /*#__PURE__*/_react["default"].createElement("span", null, "Time left: "), this.state.minutes < 10 ? "0".concat(this.state.minutes) : this.state.minutes, ":", this.state.seconds < 10 ? "0".concat(this.state.seconds) : this.state.seconds));
-    }
-  }], [{
-    key: "propTypes",
-    get: function get() {
-      return {
-        options: _propTypes["default"].object
-      };
-    }
-  }]);
-}(_react.Component);

package/src/timer.js

@@ -1,114 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-
-export default class Otp extends Component {
-  static get propTypes() {
-    return {
-      options: PropTypes.object,
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      showfield: false,
-      minutes: this.props.minutes ? this.props.minutes : 0,
-      seconds: this.props.seconds ? this.props.seconds : 30,
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  componentDidMount() {
-    clearInterval(this.myInterval);
-    this.otptimer();
-  }
-
-  otptimer() {
-    clearInterval(this.myInterval);
-    this.myInterval = setInterval(() => {
-      const { seconds, minutes } = this.state;
-
-      if (seconds > 0) {
-        this.setState(({ seconds }) => ({
-          seconds: seconds - 1,
-        }));
-      }
-      if (seconds === 0) {
-        if (minutes === 0) {
-          clearInterval(this.myInterval);
-        } else {
-          this.setState(({ minutes }) => ({
-            minutes: minutes - 1,
-            seconds: 59,
-          }));
-        }
-      }
-    }, 1000);
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.myInterval);
-  }
-
-  handleClick(event) {
-    this.setState({
-      minutes: this.props.minutes ? this.props.minutes : 0,
-      seconds: this.props.seconds ? this.props.seconds : 30,
-    });
-    this.props.resend();
-    this.otptimer();
-    event.preventDefault();
-  }
-  //   wrapperFunction(e){
-  //     this.props.resend;
-  //     this.handleClick.bind(this);
-  // }
-
-  render() {
-    const textStyle = {
-      fontSize: "16px",
-      fontFamily: "Roboto",
-      lineHeight: "22px",
-      color: this.props.textColor ? this.props.textColor : "#000000",
-    };
-
-    const buttonStyling = {
-      border: "none",
-      cursor: "pointer",
-      background: this.props.background ? this.props.background : "#0033cc",
-      color: this.props.buttonColor ? this.props.buttonColor : "#fff",
-      fontSize: "16px",
-      lineHeight: "22px",
-    };
-
-    return (
-      <div style={textStyle}>
-        {this.state.minutes === 0 && this.state.seconds === 0 ? (
-          <button style={{...buttonStyling, ...this.props.buttonStyle}} onClick={this.handleClick} className={this.props.buttonClassName}>
-            {this.props.ButtonText ? (
-              <span>{this.props.ButtonText} </span>
-            ) : (
-              <span>Resend</span>
-            )}
-          </button>
-        ) : (
-          <span className={this.props.timerSpanClass} style={this.props.timerSpanStyle}>
-            {this.props.text ? (
-              <span>{this.props.text} </span>
-            ) : (
-              <span>Time left: </span>
-            )}
-            {this.state.minutes < 10
-              ? `0${this.state.minutes}`
-              : this.state.minutes}
-            :
-            {this.state.seconds < 10
-              ? `0${this.state.seconds}`
-              : this.state.seconds}
-          </span>
-        )}
-      </div>
-    );
-  }
-}