{"id":26258457,"url":"https://github.com/vydimitrov/use-elapsed-time","last_synced_at":"2025-04-07T11:08:17.792Z","repository":{"id":35149258,"uuid":"212969010","full_name":"vydimitrov/use-elapsed-time","owner":"vydimitrov","description":"React hook to measure elapsed time using requestAnimationFrame","archived":false,"fork":false,"pushed_at":"2024-08-30T13:20:20.000Z","size":1186,"stargazers_count":68,"open_issues_count":4,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-31T09:04:52.619Z","etag":null,"topics":["animation","animation-timings","elapsed-time","hooks","react","requestanimationframe"],"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/vydimitrov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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-10-05T08:41:39.000Z","updated_at":"2024-07-17T10:08:24.000Z","dependencies_parsed_at":"2024-06-18T15:23:27.902Z","dependency_job_id":"1f3e0d96-9a10-4fcb-9598-cd332962920d","html_url":"https://github.com/vydimitrov/use-elapsed-time","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Fuse-elapsed-time","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Fuse-elapsed-time/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Fuse-elapsed-time/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vydimitrov%2Fuse-elapsed-time/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vydimitrov","download_url":"https://codeload.github.com/vydimitrov/use-elapsed-time/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640464,"owners_count":20971557,"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":["animation","animation-timings","elapsed-time","hooks","react","requestanimationframe"],"created_at":"2025-03-13T21:45:29.046Z","updated_at":"2025-04-07T11:08:17.770Z","avatar_url":"https://github.com/vydimitrov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# useElapsedTime React hook\n\n[![npm](https://img.shields.io/npm/v/use-elapsed-time)](https://www.npmjs.com/package/use-elapsed-time)\n[![npm](https://img.shields.io/npm/dw/use-elapsed-time)](https://www.npmjs.com/package/use-elapsed-time)\n[![Codecov](https://img.shields.io/codecov/c/github/vydimitrov/use-elapsed-time)](https://app.codecov.io/gh/vydimitrov/use-elapsed-time)\n[![npm bundle size](https://img.shields.io/bundlephobia/min/use-elapsed-time)](https://bundlephobia.com/result?p=use-elapsed-time)\n\nReact hook to measure elapsed time using `requestAnimationFrame`. The time measurement can be played and paused, additionally the start time and duration can be set. The primary use case of the hooks is in animations where the most important part of the animation is time.\n\n- Toggle play/pause\n- Set start time and duration\n- Adjust update interval to your need\n\n## Installation\n\n```\nyarn add use-elapsed-time\n```\n\n## Basic usage\n\n```jsx\nimport { useElapsedTime } from 'use-elapsed-time'\n\nconst MyComponent = () =\u003e {\n  const { elapsedTime } = useElapsedTime({ isPlaying: true })\n\n  return elapsedTime\n}\n```\n\n[![Edit epic-dream-hn62k](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/epic-dream-hn62k?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Function signature\n\n```js\n  const {\n    elapsedTime: number,\n    reset: (newStartAt: number) =\u003e void\n  } = useElapsedTime({\n    isPlaying: boolean,\n    duration?: number,\n    startAt?: number,\n    updateInterval?: number,\n    onComplete?: (totalElapsedTime: number) =\u003e void | { shouldRepeat?: boolean, delay?: number, newStartAt?: number },\n    onUpdate?: (elapsedTime: number) =\u003e void\n  })\n```\n\n## Props\n\n| Prop Name      | Type                                                                           | Default | Description                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| -------------- | ------------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| isPlaying      | boolean                                                                        | -       | Indicates if the loop to get the elapsed time is running or it is paused                                                                                                                                                                                                                                                                                                                                                          |\n| duration       | number                                                                         | -       | Animation duration in seconds                                                                                                                                                                                                                                                                                                                                                                                                     |\n| startAt        | number                                                                         | 0       | Shift the start time to a different value than 0                                                                                                                                                                                                                                                                                                                                                                                  |\n| updateInterval | number                                                                         | 0       | Update interval in seconds. Determines how often the elapsed time value will change. When set to 0 the value will update on each key frame                                                                                                                                                                                                                                                                                        |\n| onComplete     | (totalElapsedTime: number) =\u003e void \\| { shouldRepeat: boolean, delay: number } | -       | `onComplete` callback will be fired when the duration is reached. The callback will receive as an argument the `totalElapsedTime` in seconds. `onComplete` can be used to restart the elapsed time loop by returning an object with the following params: `shouldRepeat` - indicates if the loop should start over; `delay` - delay before looping again in seconds; `newStartAt` - change the startAt value before looping again |\n| onUpdate       | (elapsedTime: number) =\u003e void                                                  | -       | On time update event handler. It receives the current elapsedTime time in seconds                                                                                                                                                                                                                                                                                                                                                 |\n\n## Return value\n\nThe hook returns an object with `elapsedTime` in seconds and `reset` method - `{ elapsedTime, reset }`\n\n## Browser support\n\nThe hook supports [all modern browsers](https://caniuse.com/?search=es6) targeting `es6`. Internet Explorer (IE) is not longer supported.\n\n## Use cases\n\nCountdown timer  \n[![Edit priceless-hill-2tbiq](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/priceless-hill-2tbiq?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\nCount up animation  \n[![Edit hungry-cray-hl6wn](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/hungry-cray-hl6wn?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\nNon-liner path animation  \n[![Edit inspiring-austin-d6ol6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/inspiring-austin-d6ol6?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvydimitrov%2Fuse-elapsed-time","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvydimitrov%2Fuse-elapsed-time","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvydimitrov%2Fuse-elapsed-time/lists"}