{"id":25628404,"url":"https://github.com/siamahnaf/otp-timer","last_synced_at":"2025-07-12T07:33:50.990Z","repository":{"id":274944400,"uuid":"924585476","full_name":"siamahnaf/otp-timer","owner":"siamahnaf","description":"A simple react otp timer component with resend functionality🤷","archived":false,"fork":false,"pushed_at":"2025-05-22T09:00:07.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-28T02:41:48.495Z","etag":null,"topics":["nextjs","one-time-password","otp","otp-timer","otptimer","react","react-otp-timer","timer"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@siamf/otp-timer?activeTab=readme","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siamahnaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-30T09:38:08.000Z","updated_at":"2025-05-22T09:00:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"0879075d-c4f1-4768-954a-64815e43c1b5","html_url":"https://github.com/siamahnaf/otp-timer","commit_stats":null,"previous_names":["siamahnaf/otp-timer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/siamahnaf/otp-timer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/otp-timer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264958193,"owners_count":23689010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","one-time-password","otp","otp-timer","otptimer","react","react-otp-timer","timer"],"created_at":"2025-02-22T18:30:49.668Z","updated_at":"2025-07-12T07:33:50.983Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/siamahnaf"],"categories":[],"sub_categories":[],"readme":"\u003cbr/\u003e\r\n\u003cpicture\u003e\r\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780157/Personal%20Logo/logo-white_e6fujz.png\"\u003e\r\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\"\u003e\r\n  \u003cimg alt=\"Siam Ahnaf\" src=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\" height=\"auto\" width=\"240\"\u003e\r\n\u003c/picture\u003e \r\n\u003cbr/\u003e \u003cbr/\u003e\r\n\r\n\r\n# @siamf/otp-timer\r\n\r\nA simple and customizable react otp timer \u0026 input component with typescript support. very simple and more customizable design and smallest bundle size. You can use this component into any react and nextjs projects.\r\n\r\n\u003ca href=\"https://www.buymeacoffee.com/siamahnaf\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\r\n\r\n- SSR Friendly\r\n- Customizable\r\n- TypeScript Support\r\n- Smallest Bundle Size(About 13kb)\r\n- Otp Timer \u0026 Otp Input Component\r\n\r\n\r\n## Installation\r\n\r\n```shell-script\r\n$ npm i @siamf/otp-timer\r\n```\r\n\r\n## Demo\r\n\r\n\u003cimg src=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1672334376/otp-timer-ts_f8ebe8.gif\" alt=\"Girl in a jacket\" width=\"250\"\u003e\r\n\r\n## Usage?\r\n\r\n### `OtpTimer` Component\r\n\r\n```javascript\r\nimport { Otptimer } from \"@siamf/otp-timer\";\r\n\r\nconst MyComponent = () =\u003e {\r\n\r\n  const handleResend = () =\u003e {\r\n    //desired function to be performed on clicking resend button\r\n  }\r\n\r\n  return (\r\n    \u003cdiv\u003e\r\n      \u003cOtptimer\r\n          minutes={0}\r\n          seconds={30}\r\n          onResend={handleResend}\r\n          renderText={(props) =\u003e \u003cp\u003eYou can resend code in {props.minutes} minutes and {props.seconds} seconds\u003c/p\u003e}\r\n          renderButton={(props) =\u003e \u003cbutton {...props}\u003e\r\n              Send Code Again\r\n          \u003c/button\u003e}\r\n      /\u003e\r\n    \u003c/div\u003e\r\n  );\r\n};\r\n\r\nexport default MyComponent;\r\n```\r\n\r\n### `OtpInput` Component\r\n\r\n```javascript\r\nimport { useState } from \"react\";\r\nimport { OtpInput } from \"@siamf/otp-timer\";\r\n\r\nexport default function App() {\r\n  const [otp, setOtp] = useState\u003cstring\u003e(\");\r\n\r\n  return (\r\n    \u003cOtpInput\r\n      value={otp}\r\n      onChange={setOtp}\r\n      numInputs={4}\r\n      renderSeparator={\u003cspan\u003e-\u003c/span\u003e}\r\n      renderInput={(props) =\u003e \u003cinput {...props} /\u003e}\r\n    /\u003e\r\n  );\r\n}\r\n```\r\n\r\n# Customization\r\n\r\n## `OtpTimer` component\r\n\r\n### Options\r\n\r\n|name|Description|Default Value|\r\n|:---:| :-------------:|:-----------:|\r\n|seconds|number of seconds for which timer must be set|30|\r\n|minutes|number of minutes for which the timer must be set|0|\r\n|onResend|function that would get triggered on clicking the resend button|n/a|\r\n|renderText|Customizable text content(See Example Code)|Required|\r\n|renderButton|Customizable button content(See Example Code)|Required|\r\n\r\n## `OtpInput` component\r\n\r\n\u003ctable\u003e\r\n  \u003ctr\u003e\r\n    \u003cth\u003eName\u003cbr/\u003e\u003c/th\u003e\r\n    \u003cth\u003eType\u003c/th\u003e\r\n    \u003cth\u003eRequired\u003c/th\u003e\r\n    \u003cth\u003eDefault\u003c/th\u003e\r\n    \u003cth\u003eDescription\u003c/th\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003enumInputs\u003c/td\u003e\r\n    \u003ctd\u003enumber\u003c/td\u003e\r\n    \u003ctd\u003etrue\u003c/td\u003e\r\n    \u003ctd\u003e4\u003c/td\u003e\r\n    \u003ctd\u003eNumber of OTP inputs to be rendered.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003erenderInput\u003c/td\u003e\r\n    \u003ctd\u003efunction\u003c/td\u003e\r\n    \u003ctd\u003etrue\u003c/td\u003e\r\n    \u003ctd\u003enone\u003c/td\u003e\r\n    \u003ctd\u003eA function that returns the input that is supposed to be rendered for each of the input fields. \r\n      The function will get two arguments: \u003ccode\u003einputProps\u003c/code\u003e and \u003ccode\u003eindex\u003c/code\u003e. \u003ccode\u003einputProps\u003c/code\u003e is an object that contains all the props \u003cb\u003ethat should be passed to the input being rendered\u003c/b\u003e (Overriding these props is not recommended because it might lead to some unexpected behaviour). \u003ccode\u003eindex\u003c/code\u003e is the index of the input being rendered.\r\n    \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eonChange\u003c/td\u003e\r\n    \u003ctd\u003efunction\u003c/td\u003e\r\n    \u003ctd\u003etrue\u003c/td\u003e\r\n    \u003ctd\u003econsole.log\u003c/td\u003e\r\n    \u003ctd\u003eReturns OTP code typed in inputs.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eonPaste\u003c/td\u003e\r\n    \u003ctd\u003efunction\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003enone\u003c/td\u003e\r\n    \u003ctd\u003eProvide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.\r\n    \u003c/br\u003e\u003c/br\u003e\r\n    Example:\r\n    \u003cpre\u003e\r\nconst handlePaste: React.ClipboardEventHandler\u003cHTMLDivElement\u003e = (event) =\u003e {\r\n  const data = event.clipboardData.getData('text');\r\n  console.log(data)\r\n};\u003c/pre\u003e\r\n\r\n  \u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003evalue\u003c/td\u003e\r\n    \u003ctd\u003estring / number\u003c/td\u003e\r\n    \u003ctd\u003etrue\u003c/td\u003e\r\n    \u003ctd\u003e''\u003c/td\u003e\r\n    \u003ctd\u003eThe value of the OTP passed into the component.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n    \u003ctr\u003e\r\n     \u003ctd\u003eplaceholder\u003c/td\u003e\r\n     \u003ctd\u003estring\u003c/td\u003e\r\n     \u003ctd\u003efalse\u003c/td\u003e\r\n     \u003ctd\u003enone\u003c/td\u003e\r\n     \u003ctd\u003eSpecify an expected value of each input. The length of this string should be equal to \u003ccode\u003enumInputs\u003c/code\u003e.\u003c/td\u003e\r\n   \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003erenderSeparator\u003c/td\u003e\r\n    \u003ctd\u003ecomponent / function\u003cbr/\u003e\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003enone\u003c/td\u003e\r\n    \u003ctd\u003eProvide a custom separator between inputs by passing a component. For instance, \u003ccode\u003e\u0026lt;span\u0026gt;-\u0026lt;/span\u0026gt;\u003c/code\u003e would add \u003ccode\u003e-\u003c/code\u003e between each input.\u003c/td\u003e You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003econtainerStyle\u003c/td\u003e\r\n    \u003ctd\u003estyle (object) / className (string)\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003enone\u003c/td\u003e\r\n    \u003ctd\u003eStyle applied or class passed to container of inputs.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003einputStyle\u003c/td\u003e\r\n    \u003ctd\u003estyle (object) / className (string)\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003enone\u003c/td\u003e\r\n    \u003ctd\u003eStyle applied or class passed to each input.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003einputType\u003c/td\u003e\r\n    \u003ctd\u003e\u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types\"\u003e\u0026lt;input\u0026gt; type\u003ca\u003e\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003etext\u003c/td\u003e\r\n    \u003ctd\u003eThe type of the input that will be passed to the input element being rendered. In v2 \u003ccode\u003eisInputNum\u003c/code\u003e used to set the input type as \u003ccode\u003etel\u003c/code\u003e and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type \u003ccode\u003enumber\u003c/code\u003e. That behaviour is still supported if you pass \u003ccode\u003etel\u003c/code\u003e to the inputType prop.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eshouldAutoFocus\u003c/td\u003e\r\n    \u003ctd\u003eboolean\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003eAuto focuses input on initial page load.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n  \u003ctr\u003e\r\n    \u003ctd\u003eskipDefaultStyles\u003c/td\u003e\r\n    \u003ctd\u003eboolean\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003efalse\u003c/td\u003e\r\n    \u003ctd\u003eThe component comes with default styles for legacy reasons. Pass \u003ccode\u003etrue\u003c/code\u003e to skip those styles. This prop will be removed in the next major release.\u003c/td\u003e\r\n  \u003c/tr\u003e\r\n\u003c/table\u003e\r\n\r\n## Issues\r\n\r\nYou are welcome to create an issue.\r\n\r\n## Stay in touch\r\n\r\n- Author - [Siam Ahnaf](https://www.siamahnaf.com/)\r\n- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)\r\n- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fotp-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Fotp-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fotp-timer/lists"}