{"id":13804137,"url":"https://github.com/thibaultboursier/use-timer","last_synced_at":"2025-04-04T17:09:57.873Z","repository":{"id":39381388,"uuid":"173197481","full_name":"thibaultboursier/use-timer","owner":"thibaultboursier","description":"A timer hook for React","archived":false,"fork":false,"pushed_at":"2023-03-03T11:45:58.000Z","size":1082,"stargazers_count":200,"open_issues_count":15,"forks_count":24,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-03-28T16:11:30.821Z","etag":null,"topics":["clock","countdown","react","react-hook","react-hooks","time","timer"],"latest_commit_sha":null,"homepage":"","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/thibaultboursier.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":"2019-02-28T22:30:55.000Z","updated_at":"2025-03-20T17:07:13.000Z","dependencies_parsed_at":"2024-06-18T14:36:54.084Z","dependency_job_id":null,"html_url":"https://github.com/thibaultboursier/use-timer","commit_stats":{"total_commits":152,"total_committers":9,"mean_commits":16.88888888888889,"dds":0.3223684210526315,"last_synced_commit":"8342843b53b74b55f7ac9186f446ab964ef3222b"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaultboursier%2Fuse-timer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaultboursier%2Fuse-timer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaultboursier%2Fuse-timer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thibaultboursier%2Fuse-timer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thibaultboursier","download_url":"https://codeload.github.com/thibaultboursier/use-timer/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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":["clock","countdown","react","react-hook","react-hooks","time","timer"],"created_at":"2024-08-04T01:00:42.475Z","updated_at":"2025-04-04T17:09:57.857Z","avatar_url":"https://github.com/thibaultboursier.png","language":"TypeScript","readme":"# ⏱️ use-timer\n\n[![npm Version](https://img.shields.io/npm/v/use-timer.svg)](https://www.npmjs.com/package/use-timer) [![License](https://img.shields.io/npm/l/use-timer.svg)](https://www.npmjs.com/package/use-timer) [![Linux Build Status](https://travis-ci.com/thibaultboursier/use-timer.svg?branch=master)](https://travis-ci.com/thibaultboursier/use-timer) [![Bundle size](https://badgen.net/bundlephobia/min/use-timer?label=size)](https://bundlephobia.com/result?p=use-timer) [![Bundle size](https://badgen.net/bundlephobia/minzip/use-timer?label=gzip%20size)](https://bundlephobia.com/result?p=use-timer)\n\nSimple timer turned into React Hooks.\nRead about [Hooks](https://reactjs.org/docs/hooks-intro.html) feature.\n\n## Installation\n\n```\nnpm i use-timer\n```\n\nWith [Yarn](https://yarnpkg.com/):\n\n```\nyarn add use-timer\n```\n\n## Demo\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/3be3466e-4bc9-46f1-89b0-9b09910cc20b/deploy-status)](https://app.netlify.com/sites/use-timer/deploys)\n\n🚀 Try last production version on Netlify!\n\nhttps://use-timer.netlify.app/\n\n## Usage\n\n### Basic timer\n\n```tsx\nimport React from 'react';\nimport { useTimer } from 'use-timer';\n\nconst App = () =\u003e {\n  const { time, start, pause, reset, status } = useTimer();\n\n  return (\n    \u003c\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={start}\u003eStart\u003c/button\u003e\n        \u003cbutton onClick={pause}\u003ePause\u003c/button\u003e\n        \u003cbutton onClick={reset}\u003eReset\u003c/button\u003e\n      \u003c/div\u003e\n      \u003cp\u003eElapsed time: {time}\u003c/p\u003e\n      {status === 'RUNNING' \u0026\u0026 \u003cp\u003eRunning...\u003c/p\u003e}\n    \u003c/\u003e\n  );\n};\n```\n\n### Decremental timer\n\n```tsx\nconst { time, start, pause, reset, status } = useTimer({\n  initialTime: 100,\n  timerType: 'DECREMENTAL',\n});\n```\n\n### Timer with end time\n\n```tsx\nconst { time, start, pause, reset, status } = useTimer({\n  endTime: 30,\n  initialTime: 10,\n});\n```\n\n### Advance time\n\nThis works for all types of timer (incremental and decremental).\n\n```tsx\nconst { time, start, advanceTime } = useTimer({\n  initialTime: 20,\n});\n\nstart();\nadvanceTime(10);\n\nconsole.log(time); // 30\n```\n\n## Callbacks\n\nSome callback functions can be provided.\n\n### When time is over\n\n```tsx\nconst { time, start, pause, reset, status } = useTimer({\n  endTime,\n  onTimeOver: () =\u003e {\n    console.log('Time is over');\n  },\n});\n```\n\n### When time is updated\n\n```tsx\nconst { time, start, pause, reset, status } = useTimer({\n  endTime,\n  onTimeUpdate: (time) =\u003e {\n    console.log('Time is updated', time);\n  },\n});\n```\n\n## Configuration\n\nThe configuration and all its parameters are optional.\n\n| Property      | Type     | Default value | Description                                                                            |\n| ------------- | -------- | ------------- | -------------------------------------------------------------------------------------- |\n| autostart     | boolean  | false         | Pass true to start timer automatically                                                 |\n| endTime       | number   | null          | The value for which timer stops                                                        |\n| initialStatus | string   | \"STOPPED\"     | The initial status for the timer. Options are: \"RUNNING\", \"PAUSED\", and \"STOPPED\"      |\n| initialTime   | number   | 0             | The starting value for the timer                                                       |\n| interval      | number   | 1000          | The interval in milliseconds                                                           |\n| onTimeOver    | function |               | Callback function that is called when time is over                                     |\n| onTimeUpdate  | function |               | Callback function that is called when time is updated                                  |\n| step          | number   | 1             | The value to add to each increment / decrement                                         |\n| timerType     | string   | \"INCREMENTAL\" | The choice between a value that increases (\"INCREMENTAL\") or decreases (\"DECREMENTAL\") |\n","funding_links":[],"categories":["Extensions/Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaultboursier%2Fuse-timer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthibaultboursier%2Fuse-timer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthibaultboursier%2Fuse-timer/lists"}