{"_id":"@a7medhassan/react-otp","_rev":"2-49ca9f63c3dac3a395efee8d27bc1716","name":"@a7medhassan/react-otp","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@a7medhassan/react-otp","repository":{"type":"git","url":"git+https://github.com/a7medhassanmohi/React-OTP.git"},"private":false,"version":"0.1.0","description":"`react-otp` is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features. using typescript and react ","main":"dist/index.js","types":"dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"engines":{"node":">=10"},"scripts":{"start":"tsup --watch","build":"tsup","test":"jest --runInBand","setup":"npm i && cd site && npm i && cd .. && npm run link","link":"npm link ./site/node_modules/react && npm link ./site/node_modules/react-dom","size":"size-limit"},"keywords":["react","otp","one-time password","authentication","input","component","form","validation","security","2fa","two-factor authentication","verification","token","multi-factor authentication","authenticator","login","signup","user verification","code","UI","UI component","UI library","frontend","web development","JavaScript","typescript","@a7medhassanmohi","@a7medhassan","next","next-otp"],"author":{"name":"Ahmed Hassan Mohi @a7medhassanmohi"},"license":"MIT","devDependencies":{"@size-limit/preset-small-lib":"^11.0.2","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","prettier":"^3.2.5","react":"^18.2.0","react-dom":"^18.2.0","size-limit":"^11.0.2","ts-jest":"^29.1.2","tslib":"^2.6.2","tsup":"^8.0.2","typescript":"^5.3.3"},"peerDependencies":{"react":">=16","react-dom":">=16"},"gitHead":"23dc5a6c774b8b8bd195badeea51a1edac678f27","bugs":{"url":"https://github.com/a7medhassanmohi/React-OTP/issues"},"homepage":"https://github.com/a7medhassanmohi/React-OTP#readme","_id":"@a7medhassan/react-otp@0.1.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-SaXpxErE7BHUtuMKMjZ7oiueCQo7nhh0dR+VMao+0KVJpIfrBM/ZprfPChwkAJ3lLYZ+QIHGZHKuJOZJMrAaVw==","shasum":"7b9c699e2316474f96fafe1c65a4e52689449e44","tarball":"https://registry.npmjs.org/@a7medhassan/react-otp/-/react-otp-0.1.0.tgz","fileCount":14,"unpackedSize":52388,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLRRExN3C58twqQTX8JKLxmW0IopR3rOOmPvLsSYI82wIgD/sQVi/UU7toywjn1wVYElfvFjE5l7hnq2f9mKsmnAc="}]},"_npmUser":{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"},"directories":{},"maintainers":[{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-otp_0.1.0_1707769906771_0.9768582827417178"},"_hasShrinkwrap":false},"0.1.1":{"name":"@a7medhassan/react-otp","repository":{"type":"git","url":"git+https://github.com/a7medhassanmohi/React-OTP.git"},"private":false,"version":"0.1.1","description":"`react-otp` is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features. using typescript and react ","main":"dist/index.js","types":"dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"engines":{"node":">=10"},"scripts":{"start":"tsup --watch","build":"tsup","test":"jest --runInBand","setup":"npm i && cd site && npm i && cd .. && npm run link","link":"npm link ./site/node_modules/react && npm link ./site/node_modules/react-dom","size":"size-limit"},"keywords":["react","otp","one-time password","authentication","input","component","form","validation","security","2fa","two-factor authentication","verification","token","multi-factor authentication","authenticator","login","signup","user verification","code","UI","UI component","UI library","frontend","web development","JavaScript","typescript","@a7medhassanmohi","@a7medhassan","next","next-otp"],"author":{"name":"Ahmed Hassan Mohi @a7medhassanmohi"},"license":"MIT","devDependencies":{"@size-limit/preset-small-lib":"^11.0.2","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","prettier":"^3.2.5","react":"^18.2.0","react-dom":"^18.2.0","size-limit":"^11.0.2","ts-jest":"^29.1.2","tslib":"^2.6.2","tsup":"^8.0.2","typescript":"^5.3.3"},"peerDependencies":{"react":">=16","react-dom":">=16"},"gitHead":"8d353dc2181c8f261d4f0c687d08f380f2f639c5","bugs":{"url":"https://github.com/a7medhassanmohi/React-OTP/issues"},"homepage":"https://github.com/a7medhassanmohi/React-OTP#readme","_id":"@a7medhassan/react-otp@0.1.1","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-j0jaPs6LKRyElScXTBfpHAI25CLsYFyK0CRNlVoYFF4Kh4wf8Aw5EA23cU9iAOgE7Y5nQMa9bQGoVLUsU/x/9g==","shasum":"e11a1a2d3574d6c3264bf847430581ae05bc1c02","tarball":"https://registry.npmjs.org/@a7medhassan/react-otp/-/react-otp-0.1.1.tgz","fileCount":6,"unpackedSize":17145,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNQ3ftCXin14OHzoiicN+TQ6KFSUfq2IBMkJeJUXo9VAIgR8A/sXPQRMaaK/2a3sD3kfB8I9EA1uDwElTz0yrDV5w="}]},"_npmUser":{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"},"directories":{},"maintainers":[{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-otp_0.1.1_1707850909002_0.48897922926532567"},"_hasShrinkwrap":false},"0.1.2":{"name":"@a7medhassan/react-otp","repository":{"type":"git","url":"git+https://github.com/a7medhassanmohi/React-OTP.git"},"private":false,"version":"0.1.2","description":"`react-otp` is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features. using typescript and react ","main":"dist/index.js","types":"dist/index.d.ts","exports":{"./package.json":"./package.json",".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"engines":{"node":">=10"},"scripts":{"start":"tsup --watch","build":"tsup","test":"jest --runInBand","setup":"npm i && cd site && npm i && cd .. && npm run link","link":"npm link ./site/node_modules/react && npm link ./site/node_modules/react-dom","size":"size-limit"},"keywords":["react","otp","one-time password","authentication","input","component","form","validation","security","2fa","two-factor authentication","verification","token","multi-factor authentication","authenticator","login","signup","user verification","code","UI","UI component","UI library","frontend","web development","JavaScript","typescript","@a7medhassanmohi","@a7medhassan","next","next-otp"],"author":{"name":"Ahmed Hassan Mohi @a7medhassanmohi"},"license":"MIT","devDependencies":{"@size-limit/preset-small-lib":"^11.0.2","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","prettier":"^3.2.5","react":"^18.2.0","react-dom":"^18.2.0","size-limit":"^11.0.2","ts-jest":"^29.1.2","tslib":"^2.6.2","tsup":"^8.0.2","typescript":"^5.3.3"},"peerDependencies":{"react":">=16","react-dom":">=16"},"gitHead":"8d353dc2181c8f261d4f0c687d08f380f2f639c5","bugs":{"url":"https://github.com/a7medhassanmohi/React-OTP/issues"},"homepage":"https://github.com/a7medhassanmohi/React-OTP#readme","_id":"@a7medhassan/react-otp@0.1.2","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-qDRkVoBaDlobIcymFyWytgzMm13d6bn1EVOq7yjGohZnXxjznNz/IKPpPJk6ljOhBFbq/UMk9Ee2+p6gx8eyxg==","shasum":"4eb31e0aeb6718e8d32f70d51f98e0ffc0f3cf31","tarball":"https://registry.npmjs.org/@a7medhassan/react-otp/-/react-otp-0.1.2.tgz","fileCount":14,"unpackedSize":52518,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxAgg3me0+hlLogFxVr+VREXHTjiQZcr2ynYw6OVHPvwIgfgG1W3NIYv8vHH3Qy4IVX9HD8oNeyRpX8JPHbE5Qasw="}]},"_npmUser":{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"},"directories":{},"maintainers":[{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-otp_0.1.2_1707851006697_0.02637817352167149"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-12T20:31:46.608Z","0.1.0":"2024-02-12T20:31:46.950Z","modified":"2024-02-13T19:03:27.082Z","0.1.1":"2024-02-13T19:01:49.159Z","0.1.2":"2024-02-13T19:03:26.900Z"},"maintainers":[{"name":"a7medhassanmohi","email":"a7med.hassan.mohi@gmail.com"}],"description":"`react-otp` is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features. using typescript and react ","homepage":"https://github.com/a7medhassanmohi/React-OTP#readme","keywords":["react","otp","one-time password","authentication","input","component","form","validation","security","2fa","two-factor authentication","verification","token","multi-factor authentication","authenticator","login","signup","user verification","code","UI","UI component","UI library","frontend","web development","JavaScript","typescript","@a7medhassanmohi","@a7medhassan","next","next-otp"],"repository":{"type":"git","url":"git+https://github.com/a7medhassanmohi/React-OTP.git"},"author":{"name":"Ahmed Hassan Mohi @a7medhassanmohi"},"bugs":{"url":"https://github.com/a7medhassanmohi/React-OTP/issues"},"license":"MIT","readme":"# react-otp\n\n

\n \n \"@a7medhassan/react-otp\"\n \n

\n\n

@a7medhassan/react-otp

\n\n`react-otp` is a React component library that provides an easy-to-use OTP (One-Time Password) input component with customizable features using typescript and react.\n### it can also work with next js without any problem\n## Installation\n\nYou can install `react-otp` via npm or yarn:\n\n```bash\nnpm install @a7medhassan/react-otp\n```\n```bash\nyarn add @a7medhassan/react-otp\n```\n## Usage\n\nTo use react-otp in your React application, import the Otp component and customize it with props as needed:\n\n```jsx\nimport React from 'react';\nimport Otp from '@a7medhassan/react-otp';\n\nconst MyOtpComponent = () => {\n const handleSubmit = () => {\n // Handle OTP submission\n };\n\n const handleReset = () => {\n // Handle OTP reset\n };\n\n return (\n \n );\n};\n\nexport default MyOtpComponent;\n```\n\n\n## Props\n\nreact-otp provides the following props for customization:\n* `onSubmit`: Function called when the OTP is submitted.\n ```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n //* reset: function that handle reset of all inputs or one of theme\n//ex 1 : reset() ==>> this will reset all inputs\n//ex 2 : reset({index:1,value:\"\"}) ==>> this will reset certain input with its index\n\nconst MyOtpComponent = () => {\n const btnRef = useRef(null);\n return <>\n {}}\nsubmitBtnRef={btnRef} // must be exist to be work\n\n />\n \n \n}\n ```\n\n* `onReset`: Function called when the OTP is reset.\n```jsx\n //* reset: function that handle reset of all inputs or one of theme\n//ex 1 : reset() ==>> this will reset all inputs\n//ex 2 : reset({index:1,value:\"\"}) ==>> this will reset certain input with its index\nimport React from 'react';\nimport Otp from 'react-otp';\n\nconst MyOtpComponent = () => {\n const resetRef = useRef(null);\n const handleSubmit = () => {\n // Handle OTP submission\n };\n\n const handleReset = ({reset}) => {\n // Handle OTP reset\n reset()\n };\n\n return (\n <>\n \n \n <>\n );\n};\nexport default MyOtpComponent;\n ```\n\n* `numberOfInputs`: Number of input fields for the OTP (default: 1).\n```jsx\n \n \n ``` \n\n* `isDisabled`: Disables the OTP input fields (default: false).\n* \n```jsx\n \n \n ``` \n\n* `shouldAutoFocus`: Automatically focuses on the first input field (default: true).\n```jsx\n \n \n ```\n\n* `renderSeparator`: Custom separator to render between input fields.\n```jsx\n \n *}\n \n ```\n\n* `placeHolder`: Function to generate placeholders for input fields.\n\n```jsx\n // placeHolder is a function that accept input number(index +1) and return string that display in placeholder input\n //ex: in input number one this function will look like this (1)=>\"\" you can return the number of input or any thing you want\n \"\"}\n \n ```\n\n* `ContainerClassName`: CSS class name for the container element.\n```jsx\n \n \n ```\n\n* `inputClassName`: CSS class name for the input fields.\n\n```jsx\n \n \n ```\n\n* `onChange`: Function called when the OTP value changes.\n\n ```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n {}}\n />\n ```\n\n\n* `submitBtnRef`: Ref for the submit button.\n* `ResetBtnRef`: Ref for the reset button.\n* `submitAutomaticAfterInputsFilled`: Function to automatically submit OTP after all inputs are filled.\n```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n //* reset: function that handle reset of all inputs or one of theme\n//ex 1 : reset() ==>> this will reset all inputs\n//ex 2 : reset({index:1,value:\"\"}) ==>> this will reset certain input with its index\n {}}\n />\n ```\n\n* `onKeyDown`: Function called when a key is pressed in an input field.\n\n```jsx\n // this function accept 1 argument as object \n //* index:index of input ex:1\n //* key: value of input ex:\"5\"\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n {}}\n />\n ```\n\n* `onKeyUp`: Function called when a key is released in an input field.\n\n```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* index:index of input ex:1\n //* key: value of input ex:\"5\"\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n { }}\n />\n ```\n\n* `onFocus`: Function called when an input field gains focus.\n\n```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* index:index of input ex:1\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n {\n }}\n />\n ```\n\n* `onBlur`: Function called when an input field loses focus.\n\n```jsx\n // this function accept 1 argument as object \n //* values: values of inputs as string ex:\"1233\"\n //* valuesAsArray: values of inputs as array ex:[\"1\",\"2\",\"3\",\"4\"]\n //* index:index of input ex:1\n //* inputRefs: refs off all inputs ex inputRefs.current=[ref,ref,ref,ref] \n\n {}}\n />\n ```\n\n * `passwordType`: change the type of input to password (default=false).\n\n ```jsx\n \n ```\n\n\n\n \n\nLicense\nThis project is licensed under the MIT License.\n","readmeFilename":"README.md"}