{"id":21147841,"url":"https://github.com/siamahnaf/otp-timer-ts","last_synced_at":"2025-07-09T07:33:14.894Z","repository":{"id":65143182,"uuid":"583388187","full_name":"siamahnaf/otp-timer-ts","owner":"siamahnaf","description":"A simple react otp timer component with resend functionality🤷","archived":false,"fork":false,"pushed_at":"2024-09-17T13:09:35.000Z","size":58,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-17T16:25:04.191Z","etag":null,"topics":["nextjs","otp","otp-timer","react","timer","timer-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/otp-timer-ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE","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}},"created_at":"2022-12-29T16:21:27.000Z","updated_at":"2024-09-17T13:09:39.000Z","dependencies_parsed_at":"2024-01-07T12:24:27.741Z","dependency_job_id":"cd25dc82-f981-42b3-bcb5-f18d75c0071a","html_url":"https://github.com/siamahnaf/otp-timer-ts","commit_stats":null,"previous_names":["siamahnaf198/otp-timer-ts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fotp-timer-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/otp-timer-ts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225507567,"owners_count":17483515,"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","otp","otp-timer","react","timer","timer-component"],"created_at":"2024-11-20T09:18:50.759Z","updated_at":"2025-07-09T07:33:14.853Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","readme":"# ⚠️ Package Renamed \u0026 No Longer Maintained  \n\n## This package has been renamed to [`@siamf/otp-timer`](https://www.npmjs.com/package/@siamf/otp-timer)  \n\n### Please use [`@siamf/otp-timer`](https://www.npmjs.com/package/@siamf/otp-timer) instead.  \n\nThis package **is no longer maintained**. For the latest updates and improvements, migrate to:  \n\n👉 [`@siamf/otp-timer`](https://www.npmjs.com/package/@siamf/otp-timer)\n\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780157/Personal%20Logo/logo-white_e6fujz.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\"\u003e\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\n\u003c/picture\u003e\n\n# otp-timer-ts\n\nA simple and customizable react otp timer component with typescript support. very simple and more customizable design and smallest bundle size about 13kb. You can use this component into any react and nextjs projects.\n\n[![npm downloads](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/downloads.svg)](https://www.npmjs.com/package/otp-timer-ts)\n[![PRs Welcome](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/prs-welcome.svg)](https://github.com/siamahnaf198/otp-timer-ts)\n[![MIT licensed](https://cdn.jsdelivr.net/gh/siamahnaf198/react-simple-phone-input@main/assets/license.svg)](https://github.com/siamahnaf198/otp-timer-ts/blob/main/LICENSE)\n\n- SSR Friendly\n- Customizable\n- TypeScript Support\n- Smallest Bundle Size(About 13kb)\n\n\n## Installation\n\n```shell-script\n$ npm i otp-timer-ts --save\n```\n\n## Demo\n\n\u003cimg src=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1672334376/otp-timer-ts_f8ebe8.gif\" alt=\"Girl in a jacket\" width=\"250\"\u003e\n\n## Usage?\n\n```\nimport { Otptimer } from \"otp-timer-ts\";\n\nconst Home = () =\u003e {\n  const handleResend = () =\u003e {\n    //desired function to be performed on clicking resend button\n  }\n  return (\n    \u003cdiv\u003e\n      \u003cOtptimer minutes={0} seconds={5} onResend={handleResend} /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Home;\n\n\n```\n\n## Options\n\n| name       |                           Description                           |  Default Value  |\n| :--------- | :-------------------------------------------------------------: |  :-----------:  |\n| seconds    |          number of seconds for which timer must be set          |       30        |\n| minutes    |        number of minutes for which the timer must be set        |        0        |\n| onResend     | function that would get triggered on clicking the resend button |       n/a       |\n| text       |                content that you want to put down                |  Resend otp in  |\n| ButtonText |                            button text                          |     Resend      |\n\n## Styling\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e containerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e timer Container class name \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e textClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e text class name \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e timerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e timer class name \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonContainerClass \u003c/td\u003e\n    \u003ctd\u003e string \u003c/td\u003e\n    \u003ctd\u003e button container class \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonStyle \u003c/td\u003e\n    \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e styles for resend button \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e buttonContainerStyle \u003c/td\u003e\n    \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e styles for resend button container \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e textStyle \u003c/td\u003e\n    \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e styles for text \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e timerStyle \u003c/td\u003e\n    \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e styles for timer \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e textContainerStyle \u003c/td\u003e\n    \u003ctd\u003e CSSProperties \u003c/td\u003e\n    \u003ctd\u003e styles for timer text container \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Issues\n\nYou are welcome to create an issue.\n\n## Stay in touch\n\n- Author - [Siam Ahnaf](https://www.siamahnaf.com/)\n- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)\n- Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198)\n- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)\n\n## License\notp-timer-ts is [MIT licensed](https://github.com/siamahnaf/otp-timer-ts/blob/main/LICENSE).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fotp-timer-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Fotp-timer-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fotp-timer-ts/lists"}