custom-simple-otp 0.0.7 → 0.0.8

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/README.md +7 -6
  2. package/dist/index.d.ts +10 -10
  3. package/dist/index.js +2 -2
  4. package/dist/index.mjs +2 -2
  5. package/package.json +28 -28
package/README.md CHANGED
@@ -1,14 +1,15 @@
1
1
  # React OTP Input Component
2
2
 
3
+ # React OTP Input Component
4
+
3
5
  <div align="center">
4
- https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/images/82283299/1fbc8585-34bb-4ddf-a06f-19dfaf5ae2b0/image.jpg?AWSAccessKeyId=ASIA2F3EMEYE4JKA3XL4&Signature=XVCPdcC5%252FbvdInYqOI6DGEUtrpQ%253D&x-amz-security-token=IQoJb3JpZ2luX2VjEFgaCXVzLWVhc3QtMSJIMEYCIQDg4VYnShJYq9TaMZ%252FpdWVRTF6QMxiViAFkjdgqaThiawIhAOuMXkWNiJbs4RcN4Z6yFWmtenDcNZ%252FU6yya4vNd383CKvMECCEQARoMNjk5NzUzMzA5NzA1Igz4nGRrmbDEZA6G%252FmYq0AQub8VBdU0fiiB%252BOhlBk%252BrsbRuWuIS%252BvCLldqywUkB5lvWlsvwBxRPd3t4MV%252BLgOcUzJZdOs93sUlzZdJTCmuExnTA5jS%252FDX1rfj3EduXE7UXGn6I8ph6xadb7x6TdFUN1voG4bQjRWpyPkFsJyOdjbTE6iKUjJqAHX1OywBfASi0kkYJuQ5%252BNl0AYzWl7oTE2ghgOmKH2251%252Fh%252FtV%252BB30sb05tkOdpVH6aCY7aRYTxTBUxp8fwdcp5ADpJVux8i0hc2eZVv7zDTdrUI%252BB%252B2yB%252FNuOGt95SJvufWGstN83bj2t%252BOylZxfFvuosJ5i4%252B3s8dEGN%252FrEgPjdtIXCRzzBV9eQCc0G0qtoV9pIKhm0P%252FZt89x%252FO6V4UePLkP6jAFhR2GpPO9PwrdbWbVvQjSJyXiBPTsIjapvvuZRai22HtPGALdRXL2jbSen74eiJ%252Bg1BeqU7thdWE%252B3imAwS3p%252BfcOv1Xb%252BU4JBxUQD9CB2RUBJzRFfOKJhlAK2vKVGR7Bdg468bqZeF7ClfUBfJRawspY%252FiIqgQfNQIPlRG7p9%252BijPSR%252BC%252FQnUdHhm0NQMrKIz9mX3fCCnXhBcEHWNwdpN5Za738JHohPsuxrkjd7G5uL69lUtlvR0qoTjee5q2LegZw5uAHmaatnNVJaaz9zJz8pc02z3b2fcEeQi2M1xowW3DtfU6j%252Bck5YAanin5cxZm45tjth38aKIhIDkF4F7yUU6px2HDdJHjfSLraGLHXBgmdO4D6vJmVW7xnIkGXnTHLiQEWxARuv949xpNSl1kuFMLWV18sGOpcBGOMWNUNFI9qzULuS3BRu5ntitVi7%252BNwXpuXcO9fKhgh242Gu2kvehFxElIQKUSp9NmcFCfBpWmgUmHeEtRQBnSfPNblFOQEO4IjDTxiVlizN%252Fah%252FudC16zEXusbOk8qHqnfNQxOxH6s25Ml0IIXbu%252FUUpHl8QSjros5hRlU96XKfYlf2CShjzHhPRa77riUdYb2aEi3RBQ%253D%253D&Expires=1769331680
5
6
 
6
- https://img.shields.io/npm/v/react-otp-input-component.svg?style=for-the-badge
7
- https://img.shields.io/bundlephobia/minzip/react-otp-input-component?style=for-the-badge
8
- https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge
9
- https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=for-the-badge
7
+ ![OTP Component Demo](https://raw.githubusercontent.com/manikandansugu/otp-custom/master/image.png)
10
8
 
11
- A lightweight, accessible, and highly customizable OTP (One-Time Password) input component for React applications
9
+ [![npm version](https://img.shields.io/npm/v/custom-simple-otp.svg?style=for-the-badge)](https://www.npmjs.com/package/custom-simple-otp)
10
+ [![npm bundle size](https://img.shields.io/bundlephobia/minzip/custom-simple-otp?style=for-the-badge)](https://bundlephobia.com/package/custom-simple-otp)
11
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
12
+ [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg?style=for-the-badge)](https://www.typescriptlang.org/)
12
13
 
13
14
  </div>
14
15
 
package/dist/index.d.ts CHANGED
@@ -1,10 +1,10 @@
1
- import React from 'react';
2
-
3
- interface IOtp {
4
- length: number;
5
- onSubmit: (data: number) => void;
6
- isDisable?: boolean;
7
- }
8
- declare const Otp: React.FC<IOtp>;
9
-
10
- export { Otp };
1
+ import React from 'react';
2
+
3
+ interface IOtp {
4
+ length: number;
5
+ onSubmit: (data: number) => void;
6
+ isDisable?: boolean;
7
+ }
8
+ declare const Otp: React.FC<IOtp>;
9
+
10
+ export { Otp };
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var r=require("react/jsx-runtime"),e=require("react");"function"==typeof SuppressedError&&SuppressedError;exports.Otp=function(n){var t=n.length,u=void 0===t?4:t,i=n.isDisable,o=n.onSubmit,c=e.useState(new Array(u).fill("")),l=c[0],a=c[1],s=e.useRef([]),f=function(r,e){var n,t=function(r,e,n){if(n||2===arguments.length)for(var t,u=0,i=e.length;u<i;u++)!t&&u in e||(t||(t=Array.prototype.slice.call(e,0,u)),t[u]=e[u]);return r.concat(t||Array.prototype.slice.call(e))}([],l,!0),i=r.target.value;if(!isNaN(Number(i))){t[e]=i.substring(i.length-1),a(t);var c=t.indexOf("");i&&e+1<u&&s.current[e+1]&&(null===(n=s.current[e+c===-1?1:c])||void 0===n||n.focus());var f=t.join("");f.length===u&&o(Number(f))}};return e.useEffect(function(){s.current[0]&&s.current[0].focus()},[]),r.jsx("div",{className:"otp-container",children:null==l?void 0:l.map(function(e,n){return r.jsx("input",{className:"otp-input-field",ref:function(r){s.current[n]=r},value:e,onChange:function(r){return f(r,n)},onClick:function(){return function(r){s.current[r]&&s.current[r].setSelectionRange(1,1)}(n)},onKeyDown:function(r){return function(r,e){var n,t,i;"Backspace"===r.key&&!l[e]&&e<u?null===(n=s.current[e-1])||void 0===n||n.focus():"ArrowRight"===r.key?null===(t=s.current[e+1])||void 0===t||t.focus():"ArrowLeft"===r.key&&(null===(i=s.current[e-1])||void 0===i||i.focus(),setTimeout(function(){var r;null===(r=s.current[e-1])||void 0===r||r.setSelectionRange(1,1)},0))}(r,n)},disabled:i},n)})})};
2
- //# sourceMappingURL=index.js.map
1
+ "use strict";var r=require("react/jsx-runtime"),e=require("react");"function"==typeof SuppressedError&&SuppressedError;exports.Otp=function(n){var t=n.length,u=void 0===t?4:t,i=n.isDisable,o=n.onSubmit,c=e.useState(new Array(u).fill("")),l=c[0],a=c[1],s=e.useRef([]),f=function(r,e){var n,t=function(r,e,n){if(n||2===arguments.length)for(var t,u=0,i=e.length;u<i;u++)!t&&u in e||(t||(t=Array.prototype.slice.call(e,0,u)),t[u]=e[u]);return r.concat(t||Array.prototype.slice.call(e))}([],l,!0),i=r.target.value;if(!isNaN(Number(i))){t[e]=i.substring(i.length-1),a(t);var c=t.indexOf("");i&&e+1<u&&s.current[e+1]&&(null===(n=s.current[e+c===-1?1:c])||void 0===n||n.focus());var f=t.join("");f.length===u&&o(Number(f))}};return e.useEffect(function(){s.current[0]&&s.current[0].focus()},[]),r.jsx("div",{className:"otp-container",children:null==l?void 0:l.map(function(e,n){return r.jsx("input",{className:"otp-input-field",ref:function(r){s.current[n]=r},value:e,onChange:function(r){return f(r,n)},onClick:function(){return function(r){s.current[r]&&s.current[r].setSelectionRange(1,1)}(n)},onKeyDown:function(r){return function(r,e){var n,t,i;"Backspace"===r.key&&!l[e]&&e<u?null===(n=s.current[e-1])||void 0===n||n.focus():"ArrowRight"===r.key?null===(t=s.current[e+1])||void 0===t||t.focus():"ArrowLeft"===r.key&&(null===(i=s.current[e-1])||void 0===i||i.focus(),setTimeout(function(){var r;null===(r=s.current[e-1])||void 0===r||r.setSelectionRange(1,1)},0))}(r,n)},disabled:i},n)})})};
2
+ //# sourceMappingURL=index.js.map
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as r}from"react/jsx-runtime";import{useState as n,useRef as e,useEffect as t}from"react";"function"==typeof SuppressedError&&SuppressedError;var o=function(o){var u=o.length,i=void 0===u?4:u,c=o.isDisable,l=o.onSubmit,a=n(new Array(i).fill("")),f=a[0],s=a[1],p=e([]),v=function(r,n){var e,t=function(r,n,e){if(e||2===arguments.length)for(var t,o=0,u=n.length;o<u;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return r.concat(t||Array.prototype.slice.call(n))}([],f,!0),o=r.target.value;if(!isNaN(Number(o))){t[n]=o.substring(o.length-1),s(t);var u=t.indexOf("");o&&n+1<i&&p.current[n+1]&&(null===(e=p.current[n+u===-1?1:u])||void 0===e||e.focus());var c=t.join("");c.length===i&&l(Number(c))}};return t(function(){p.current[0]&&p.current[0].focus()},[]),r("div",{className:"otp-container",children:null==f?void 0:f.map(function(n,e){return r("input",{className:"otp-input-field",ref:function(r){p.current[e]=r},value:n,onChange:function(r){return v(r,e)},onClick:function(){return function(r){p.current[r]&&p.current[r].setSelectionRange(1,1)}(e)},onKeyDown:function(r){return function(r,n){var e,t,o;"Backspace"===r.key&&!f[n]&&n<i?null===(e=p.current[n-1])||void 0===e||e.focus():"ArrowRight"===r.key?null===(t=p.current[n+1])||void 0===t||t.focus():"ArrowLeft"===r.key&&(null===(o=p.current[n-1])||void 0===o||o.focus(),setTimeout(function(){var r;null===(r=p.current[n-1])||void 0===r||r.setSelectionRange(1,1)},0))}(r,e)},disabled:c},e)})})};export{o as Otp};
2
- //# sourceMappingURL=index.mjs.map
1
+ import{jsx as r}from"react/jsx-runtime";import{useState as n,useRef as e,useEffect as t}from"react";"function"==typeof SuppressedError&&SuppressedError;var o=function(o){var u=o.length,i=void 0===u?4:u,c=o.isDisable,l=o.onSubmit,a=n(new Array(i).fill("")),f=a[0],s=a[1],p=e([]),v=function(r,n){var e,t=function(r,n,e){if(e||2===arguments.length)for(var t,o=0,u=n.length;o<u;o++)!t&&o in n||(t||(t=Array.prototype.slice.call(n,0,o)),t[o]=n[o]);return r.concat(t||Array.prototype.slice.call(n))}([],f,!0),o=r.target.value;if(!isNaN(Number(o))){t[n]=o.substring(o.length-1),s(t);var u=t.indexOf("");o&&n+1<i&&p.current[n+1]&&(null===(e=p.current[n+u===-1?1:u])||void 0===e||e.focus());var c=t.join("");c.length===i&&l(Number(c))}};return t(function(){p.current[0]&&p.current[0].focus()},[]),r("div",{className:"otp-container",children:null==f?void 0:f.map(function(n,e){return r("input",{className:"otp-input-field",ref:function(r){p.current[e]=r},value:n,onChange:function(r){return v(r,e)},onClick:function(){return function(r){p.current[r]&&p.current[r].setSelectionRange(1,1)}(e)},onKeyDown:function(r){return function(r,n){var e,t,o;"Backspace"===r.key&&!f[n]&&n<i?null===(e=p.current[n-1])||void 0===e||e.focus():"ArrowRight"===r.key?null===(t=p.current[n+1])||void 0===t||t.focus():"ArrowLeft"===r.key&&(null===(o=p.current[n-1])||void 0===o||o.focus(),setTimeout(function(){var r;null===(r=p.current[n-1])||void 0===r||r.setSelectionRange(1,1)},0))}(r,e)},disabled:c},e)})})};export{o as Otp};
2
+ //# sourceMappingURL=index.mjs.map
package/package.json CHANGED
@@ -1,28 +1,28 @@
1
- {
2
- "name": "custom-simple-otp",
3
- "version": "0.0.7",
4
- "description": "custom multi input otp",
5
- "main": "dist/index.js",
6
- "module": "dist/index.mjs",
7
- "types": "dist/index.d.ts",
8
- "scripts": {
9
- "test": "echo \"Error: no test specified\" && exit 1",
10
- "rollup": "rollup -c --bundleConfigAsCjs"
11
- },
12
- "author": "",
13
- "license": "ISC",
14
- "devDependencies": {
15
- "tslib": "^2.8.1",
16
- "typescript": "^5.9.3"
17
- },
18
- "dependencies": {
19
- "@rollup/plugin-commonjs": "^29.0.0",
20
- "@rollup/plugin-node-resolve": "^16.0.3",
21
- "@rollup/plugin-terser": "^0.4.4",
22
- "@rollup/plugin-typescript": "^12.3.0",
23
- "@types/react": "^19.2.9",
24
- "rollup-plugin-dts": "^6.3.0",
25
- "rollup-plugin-peer-deps-external": "^2.2.4",
26
- "rollup-plugin-postcss": "^4.0.2"
27
- }
28
- }
1
+ {
2
+ "name": "custom-simple-otp",
3
+ "version": "0.0.8",
4
+ "description": "custom multi input otp",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "scripts": {
9
+ "test": "echo \"Error: no test specified\" && exit 1",
10
+ "rollup": "rollup -c --bundleConfigAsCjs"
11
+ },
12
+ "author": "",
13
+ "license": "ISC",
14
+ "devDependencies": {
15
+ "tslib": "^2.8.1",
16
+ "typescript": "^5.9.3"
17
+ },
18
+ "dependencies": {
19
+ "@rollup/plugin-commonjs": "^29.0.0",
20
+ "@rollup/plugin-node-resolve": "^16.0.3",
21
+ "@rollup/plugin-terser": "^0.4.4",
22
+ "@rollup/plugin-typescript": "^12.3.0",
23
+ "@types/react": "^19.2.9",
24
+ "rollup-plugin-dts": "^6.3.0",
25
+ "rollup-plugin-peer-deps-external": "^2.2.4",
26
+ "rollup-plugin-postcss": "^4.0.2"
27
+ }
28
+ }