react-core-ts 1.5.4 → 1.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/ReactOTPInput.d.ts +2 -2
  2. package/dist/ReactOTPInput.js +15 -15
  3. package/dist/ReactOTPInput.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/ReactOTPInput.tsx +17 -17
package/dist/ReactOTPInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from "react";
2
- import { FieldErrors } from "react-hook-form";
1
+ import React from 'react';
2
+ import { FieldErrors } from 'react-hook-form';
3
3
  type OTPInputProps = {
4
4
  BoxLength?: number;
5
5
  value?: string;
package/dist/ReactOTPInput.js CHANGED
@@ -23,19 +23,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
23
23
  var jsx_runtime_1 = require("react/jsx-runtime");
24
24
  var react_1 = require("react");
25
25
  var OTPInput = function (_a) {
26
- var _b = _a.BoxLength, BoxLength = _b === void 0 ? 6 : _b, onChangeOTP = _a.onChangeOTP, _c = _a.value, value = _c === void 0 ? "" : _c, label = _a.label, errors = _a.errors, name = _a.name, id = _a.id, labelTitle = _a.labelTitle, _d = _a.initialTime, initialTime = _d === void 0 ? 240 : _d, callbackFn = _a.callbackFn;
26
+ var _b = _a.BoxLength, BoxLength = _b === void 0 ? 6 : _b, onChangeOTP = _a.onChangeOTP, _c = _a.value, value = _c === void 0 ? '' : _c, label = _a.label, errors = _a.errors, name = _a.name, id = _a.id, labelTitle = _a.labelTitle, _d = _a.initialTime, initialTime = _d === void 0 ? 240 : _d, callbackFn = _a.callbackFn;
27
27
  // Initialize OTP state from value prop
28
- var _e = (0, react_1.useState)(value.split("").concat(Array(BoxLength - value.length).fill(""))), otp = _e[0], setOtp = _e[1];
28
+ var _e = (0, react_1.useState)(value.split('').concat(Array(BoxLength - value.length).fill(''))), otp = _e[0], setOtp = _e[1];
29
29
  var inputRefs = (0, react_1.useRef)([]);
30
30
  var _f = (0, react_1.useState)(initialTime), remainingTime = _f[0], setRemainingTime = _f[1];
31
31
  var _g = (0, react_1.useState)(false), isTimerCompleted = _g[0], setIsTimerCompleted = _g[1];
32
32
  (0, react_1.useEffect)(function () {
33
33
  // Synchronize local otp state with value prop changes
34
- setOtp(value.split("").concat(Array(BoxLength - value.length).fill("")));
34
+ setOtp(value.split('').concat(Array(BoxLength - value.length).fill('')));
35
35
  }, [value, BoxLength]);
36
36
  (0, react_1.useEffect)(function () {
37
37
  if (otp)
38
- onChangeOTP(otp.join(""));
38
+ onChangeOTP(otp.join(''));
39
39
  }, [otp]);
40
40
  (0, react_1.useEffect)(function () {
41
41
  if (remainingTime > 0) {
@@ -61,27 +61,27 @@ var OTPInput = function (_a) {
61
61
  var newOtp = __spreadArray([], otp, true);
62
62
  newOtp[index] = value;
63
63
  setOtp(newOtp);
64
- if (value !== "" && index < BoxLength - 1) {
64
+ if (value !== '' && index < BoxLength - 1) {
65
65
  (_a = inputRefs.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus(); // Move focus to next input
66
66
  }
67
67
  };
68
68
  var handleKeyDown = function (e, index) {
69
69
  var _a;
70
- if (e.key === "Backspace" && otp[index] === "" && index > 0) {
70
+ if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
71
71
  (_a = inputRefs.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus(); // Move focus to previous input
72
72
  }
73
73
  };
74
74
  var handlePaste = function (e) {
75
75
  var _a, _b;
76
- var pastedData = e.clipboardData.getData("Text").slice(0, BoxLength);
76
+ var pastedData = e.clipboardData.getData('Text').slice(0, BoxLength);
77
77
  if (/[^0-9]/.test(pastedData))
78
78
  return;
79
79
  var newOtp = pastedData
80
- .split("")
81
- .concat(Array(BoxLength - pastedData.length).fill(""));
80
+ .split('')
81
+ .concat(Array(BoxLength - pastedData.length).fill(''));
82
82
  setOtp(newOtp);
83
83
  // Move focus to the last filled input field
84
- var lastIndex = newOtp.findIndex(function (val) { return val === ""; });
84
+ var lastIndex = newOtp.findIndex(function (val) { return val === ''; });
85
85
  if (lastIndex !== -1) {
86
86
  (_a = inputRefs.current[lastIndex]) === null || _a === void 0 ? void 0 : _a.focus();
87
87
  }
@@ -90,7 +90,7 @@ var OTPInput = function (_a) {
90
90
  }
91
91
  };
92
92
  var getErrors = function (err) {
93
- var errMsg = "";
93
+ var errMsg = '';
94
94
  if (err.message) {
95
95
  errMsg = err === null || err === void 0 ? void 0 : err.message;
96
96
  }
@@ -98,12 +98,12 @@ var OTPInput = function (_a) {
98
98
  };
99
99
  var handleError = function (data) {
100
100
  var _a;
101
- if (getErrors(data[name]) === "required" ||
102
- getErrors(data[name]) === "Required") {
101
+ if (getErrors(data[name]) === 'required' ||
102
+ getErrors(data[name]) === 'Required') {
103
103
  return "".concat(label !== null && label !== void 0 ? label : labelTitle, " is ").concat(getErrors(data[name]));
104
104
  }
105
105
  else {
106
- return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : "";
106
+ return (_a = getErrors(data[name])) !== null && _a !== void 0 ? _a : '';
107
107
  }
108
108
  };
109
109
  // Reset time function added
@@ -119,7 +119,7 @@ var OTPInput = function (_a) {
119
119
  };
120
120
  return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "mb-2 me-2" }, { children: (0, jsx_runtime_1.jsx)("label", __assign({ className: "text-grey-label font-normal text-common" }, { children: label })) }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex flex-col w-fit" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "flex gap-x-5 ", id: id ? "input-otp-".concat(id) : "input-otp-".concat(name) }, { children: Array(BoxLength)
121
121
  .fill('')
122
- .map(function (_, index) { return ((0, jsx_runtime_1.jsx)("input", { name: name, id: id, type: "text", autoComplete: "off", value: otp[index], onChange: function (e) { return handleChange(e, index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, onPaste: handlePaste, ref: function (el) { return (inputRefs.current[index] = el); }, maxLength: 1, onFocus: function (e) { return (e.target.style.borderColor = '#667085'); }, onBlur: function (e) { return (e.target.style.borderColor = '#D0D5DD'); }, className: "w-[54px] h-10 text-center text-lg border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm" }, index)); }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex items-center pt-3" }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ className: "text-common text-[#475467]" }, { children: "Didn't receive a code? " })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-common text-[#003C71] ml-2 ".concat(!isTimerCompleted ? 'cursor-not-allowed' : 'cursor-pointer'), onClick: handleResend }, { children: "Resend Code" }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", __assign({ className: "text-common text-[#475467]" }, { children: ["Remaining Time: ", formatTime(remainingTime)] })) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex justify-center items-center text-[#F94110] text-base font-medium\t" }, { children: errors && errors[name] && (0, jsx_runtime_1.jsxs)("span", { children: [" ", handleError(errors)] }) }))] }))] }));
122
+ .map(function (_, index) { return ((0, jsx_runtime_1.jsx)("input", { name: name, id: id, type: "text", autoComplete: "off", value: otp[index], onChange: function (e) { return handleChange(e, index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, onPaste: handlePaste, ref: function (el) { return (inputRefs.current[index] = el); }, maxLength: 1, onFocus: function (e) { return (e.target.style.borderColor = '#667085'); }, onBlur: function (e) { return (e.target.style.borderColor = '#D0D5DD'); }, className: "otp-input-customstyle w-[54px] h-10 text-center text-lg border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm" }, index)); }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "flex items-center pt-3" }, { children: [(0, jsx_runtime_1.jsx)("p", __assign({ className: "text-common text-[#475467]" }, { children: "Didn't receive a code? " })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-common text-[#003C71] ml-2 ".concat(!isTimerCompleted ? 'cursor-not-allowed' : 'cursor-pointer'), onClick: handleResend }, { children: "Resend Code" }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", __assign({ className: "text-common text-[#475467]" }, { children: ["Remaining Time: ", formatTime(remainingTime)] })) }), (0, jsx_runtime_1.jsx)("div", __assign({ className: "flex justify-center items-center text-[#F94110] text-base font-medium\t" }, { children: errors && errors[name] && (0, jsx_runtime_1.jsxs)("span", { children: [" ", handleError(errors)] }) }))] }))] }));
123
123
  };
124
124
  exports.default = OTPInput;
125
125
  //# sourceMappingURL=ReactOTPInput.js.map
package/dist/ReactOTPInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactOTPInput.js","sourceRoot":"","sources":["../src/ReactOTPInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ReactOTPInput.js","sourceRoot":"","sources":["../src/ReactOTPInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA2D;AAgB3D,IAAM,QAAQ,GAA4B,UAAC,EAW1C;QAVC,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EACb,WAAW,iBAAA,EACX,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,UAAU,gBAAA,EACV,mBAAiB,EAAjB,WAAW,mBAAG,GAAG,KAAA,EACjB,UAAU,gBAAA;IAEV,uCAAuC;IACjC,IAAA,KAAgB,IAAA,gBAAQ,EAC5B,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CACjE,EAFM,GAAG,QAAA,EAAE,MAAM,QAEjB,CAAC;IACF,IAAM,SAAS,GAAG,IAAA,cAAM,EAA8B,EAAE,CAAC,CAAC;IACpD,IAAA,KAAoC,IAAA,gBAAQ,EAAS,WAAW,CAAC,EAAhE,aAAa,QAAA,EAAE,gBAAgB,QAAiC,CAAC;IAClE,IAAA,KAA0C,IAAA,gBAAQ,EAAU,KAAK,CAAC,EAAjE,gBAAgB,QAAA,EAAE,mBAAmB,QAA4B,CAAC;IAEzE,IAAA,iBAAS,EAAC;QACR,sDAAsD;QACtD,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3E,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,IAAA,iBAAS,EAAC;QACR,IAAI,GAAG;YAAE,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,IAAA,iBAAS,EAAC;QACR,IAAI,aAAa,GAAG,CAAC,EAAE;YACrB,IAAM,SAAO,GAAG,WAAW,CAAC;gBAC1B,gBAAgB,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,GAAG,CAAC,EAAR,CAAQ,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;YAET,OAAO,cAAM,OAAA,aAAa,CAAC,SAAO,CAAC,EAAtB,CAAsB,CAAC;SACrC;aAAM;YACL,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,IAAM,UAAU,GAAG,UAAC,IAAY;QAC9B,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;QACtC,IAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAC;QAC1B,OAAO,UAAG,OAAO,cAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,WAAI,OAAO,CAAE,CAAC,CAAC,CAAC,OAAO,CAAE,CAAC;IAChE,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG,UACnB,CAAsC,EACtC,KAAa;;QAEb,IAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7B,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO;QAEjC,IAAM,MAAM,qBAAO,GAAG,OAAC,CAAC;QACxB,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACtB,MAAM,CAAC,MAAM,CAAC,CAAC;QAEf,IAAI,KAAK,KAAK,EAAE,IAAI,KAAK,GAAG,SAAS,GAAG,CAAC,EAAE;YACzC,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC,CAAC,2BAA2B;SACnE;IACH,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UACpB,CAAwC,EACxC,KAAa;;QAEb,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,KAAK,GAAG,CAAC,EAAE;YAC3D,MAAA,SAAS,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC,CAAC,+BAA+B;SACvE;IACH,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,CAAyC;;QAC5D,IAAM,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;QACvE,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,OAAO;QAEtC,IAAM,MAAM,GAAG,UAAU;aACtB,KAAK,CAAC,EAAE,CAAC;aACT,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACzD,MAAM,CAAC,MAAM,CAAC,CAAC;QAEf,4CAA4C;QAC5C,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,KAAK,EAAE,EAAV,CAAU,CAAC,CAAC;QACxD,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;YACpB,MAAA,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,0CAAE,KAAK,EAAE,CAAC;SACvC;aAAM;YACL,MAAA,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,0CAAE,KAAK,EAAE,CAAC;SAC3C;IACH,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG,UAAC,GAAQ;QACzB,IAAI,MAAM,GAAG,EAAE,CAAC;QAChB,IAAI,GAAG,CAAC,OAAO,EAAE;YACf,MAAM,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC;SACvB;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,IAAS;;QAC5B,IACE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,UAAU;YACpC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,UAAU,EACpC;YACA,OAAO,UAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,iBAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAE,CAAC;SAC7D;aAAM;YACL,OAAO,MAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,mCAAI,EAAE,CAAC;SACpC;IACH,CAAC,CAAC;IAEF,4BAA4B;IAC5B,IAAM,UAAU,GAAG;QACjB,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAC9B,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,IAAM,YAAY,GAAG;QACnB,IAAI,gBAAgB,EAAE;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,gBAAgB,CAAC,CAAC;YAC/B,UAAU,EAAE,CAAC;SACd;IACH,CAAC,CAAC;IAEF,OAAO,CACL,4CACG,KAAK,IAAI,CACR,yCAAK,SAAS,EAAC,WAAW,gBACxB,2CAAO,SAAS,EAAE,yCAAyC,gBACxD,KAAK,IACA,IACJ,CACP,EACD,0CAAK,SAAS,EAAC,qBAAqB,iBAClC,yCACE,SAAS,EAAC,eAAe,EACzB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAa,EAAE,CAAE,CAAC,CAAC,CAAC,oBAAa,IAAI,CAAE,gBAE/C,KAAK,CAAC,SAAS,CAAC;6BACd,IAAI,CAAC,EAAE,CAAC;6BACR,GAAG,CAAC,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,CACjB,kCAEE,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,EACjB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,YAAY,CAAC,CAAC,EAAE,KAAK,CAAC,EAAtB,CAAsB,EACvC,SAAS,EAAE,UAAC,CAAC,IAAK,OAAA,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EAAvB,CAAuB,EACzC,OAAO,EAAE,WAAW,EACpB,GAAG,EAAE,UAAC,EAAE,IAAK,OAAA,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,EAA/B,CAA+B,EAC5C,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC,EAAxC,CAAwC,EACxD,MAAM,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC,EAAxC,CAAwC,EACvD,SAAS,EAAE,gKAAgK,IAbtK,KAAK,CAcV,CACH,EAjBkB,CAiBlB,CAAC,IACA,EACN,0CAAK,SAAS,EAAC,wBAAwB,iBACrC,uCAAG,SAAS,EAAC,4BAA4B,6CAA4B,EACrE,0CACE,SAAS,EAAE,2CACT,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,gBAAgB,CAC3D,EACF,OAAO,EAAE,YAAY,iCAGhB,KACH,EACN,0CACE,2CAAM,SAAS,EAAC,4BAA4B,qCACzB,UAAU,CAAC,aAAa,CAAC,KACrC,GACH,EAEN,yCAAK,SAAS,EAAC,yEAAwE,gBACpF,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,kDAAQ,WAAW,CAAC,MAAM,CAAC,IAAQ,IAC1D,KACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-core-ts",
3
- "version": "1.5.4",
3
+ "version": "1.5.5",
4
4
  "description": "React Components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/ReactOTPInput.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useEffect, useRef, useState } from "react";
2
- import { FieldErrors } from "react-hook-form";
1
+ import React, { useEffect, useRef, useState } from 'react';
2
+ import { FieldErrors } from 'react-hook-form';
3
3
 
4
4
  type OTPInputProps = {
5
5
  BoxLength?: number;
@@ -17,7 +17,7 @@ type OTPInputProps = {
17
17
  const OTPInput: React.FC<OTPInputProps> = ({
18
18
  BoxLength = 6,
19
19
  onChangeOTP,
20
- value = "",
20
+ value = '',
21
21
  label,
22
22
  errors,
23
23
  name,
@@ -28,7 +28,7 @@ const OTPInput: React.FC<OTPInputProps> = ({
28
28
  }) => {
29
29
  // Initialize OTP state from value prop
30
30
  const [otp, setOtp] = useState<string[]>(
31
- value.split("").concat(Array(BoxLength - value.length).fill(""))
31
+ value.split('').concat(Array(BoxLength - value.length).fill(''))
32
32
  );
33
33
  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
34
34
  const [remainingTime, setRemainingTime] = useState<number>(initialTime);
@@ -36,11 +36,11 @@ const OTPInput: React.FC<OTPInputProps> = ({
36
36
 
37
37
  useEffect(() => {
38
38
  // Synchronize local otp state with value prop changes
39
- setOtp(value.split("").concat(Array(BoxLength - value.length).fill("")));
39
+ setOtp(value.split('').concat(Array(BoxLength - value.length).fill('')));
40
40
  }, [value, BoxLength]);
41
41
 
42
42
  useEffect(() => {
43
- if (otp) onChangeOTP(otp.join(""));
43
+ if (otp) onChangeOTP(otp.join(''));
44
44
  }, [otp]);
45
45
 
46
46
  useEffect(() => {
@@ -72,7 +72,7 @@ const OTPInput: React.FC<OTPInputProps> = ({
72
72
  newOtp[index] = value;
73
73
  setOtp(newOtp);
74
74
 
75
- if (value !== "" && index < BoxLength - 1) {
75
+ if (value !== '' && index < BoxLength - 1) {
76
76
  inputRefs.current[index + 1]?.focus(); // Move focus to next input
77
77
  }
78
78
  };
@@ -81,22 +81,22 @@ const OTPInput: React.FC<OTPInputProps> = ({
81
81
  e: React.KeyboardEvent<HTMLInputElement>,
82
82
  index: number
83
83
  ) => {
84
- if (e.key === "Backspace" && otp[index] === "" && index > 0) {
84
+ if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
85
85
  inputRefs.current[index - 1]?.focus(); // Move focus to previous input
86
86
  }
87
87
  };
88
88
 
89
89
  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
90
- const pastedData = e.clipboardData.getData("Text").slice(0, BoxLength);
90
+ const pastedData = e.clipboardData.getData('Text').slice(0, BoxLength);
91
91
  if (/[^0-9]/.test(pastedData)) return;
92
92
 
93
93
  const newOtp = pastedData
94
- .split("")
95
- .concat(Array(BoxLength - pastedData.length).fill(""));
94
+ .split('')
95
+ .concat(Array(BoxLength - pastedData.length).fill(''));
96
96
  setOtp(newOtp);
97
97
 
98
98
  // Move focus to the last filled input field
99
- const lastIndex = newOtp.findIndex((val) => val === "");
99
+ const lastIndex = newOtp.findIndex((val) => val === '');
100
100
  if (lastIndex !== -1) {
101
101
  inputRefs.current[lastIndex]?.focus();
102
102
  } else {
@@ -105,7 +105,7 @@ const OTPInput: React.FC<OTPInputProps> = ({
105
105
  };
106
106
 
107
107
  const getErrors = (err: any) => {
108
- let errMsg = "";
108
+ let errMsg = '';
109
109
  if (err.message) {
110
110
  errMsg = err?.message;
111
111
  }
@@ -114,12 +114,12 @@ const OTPInput: React.FC<OTPInputProps> = ({
114
114
 
115
115
  const handleError = (data: any) => {
116
116
  if (
117
- getErrors(data[name]) === "required" ||
118
- getErrors(data[name]) === "Required"
117
+ getErrors(data[name]) === 'required' ||
118
+ getErrors(data[name]) === 'Required'
119
119
  ) {
120
120
  return `${label ?? labelTitle} is ${getErrors(data[name])}`;
121
121
  } else {
122
- return getErrors(data[name]) ?? "";
122
+ return getErrors(data[name]) ?? '';
123
123
  }
124
124
  };
125
125
 
@@ -167,7 +167,7 @@ const OTPInput: React.FC<OTPInputProps> = ({
167
167
  maxLength={1}
168
168
  onFocus={(e) => (e.target.style.borderColor = '#667085')}
169
169
  onBlur={(e) => (e.target.style.borderColor = '#D0D5DD')}
170
- className="w-[54px] h-10 text-center text-lg border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm"
170
+ className={`otp-input-customstyle w-[54px] h-10 text-center text-lg border border-[#D0D5DD] focus:border-[#667085] transition-colors duration-200 outline-none rounded-sm`}
171
171
  />
172
172
  ))}
173
173
  </div>