{"id":15397005,"url":"https://github.com/ryanhefner/react-timer-wrapper","last_synced_at":"2025-04-12T14:14:17.695Z","repository":{"id":55627663,"uuid":"98338224","full_name":"ryanhefner/react-timer-wrapper","owner":"ryanhefner","description":"Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.","archived":false,"fork":false,"pushed_at":"2025-02-06T19:40:24.000Z","size":2160,"stargazers_count":18,"open_issues_count":12,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-26T08:51:33.412Z","etag":null,"topics":["countdown","countdown-timer","react","react-component","react-indicators","react-timecode","react-timer","react-timer-wrapper","timer"],"latest_commit_sha":null,"homepage":"https://ryanhefner.github.io/react-timer-wrapper/","language":"JavaScript","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/ryanhefner.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":"2017-07-25T18:35:08.000Z","updated_at":"2024-11-07T05:31:22.000Z","dependencies_parsed_at":"2024-10-19T04:25:26.471Z","dependency_job_id":null,"html_url":"https://github.com/ryanhefner/react-timer-wrapper","commit_stats":{"total_commits":89,"total_committers":4,"mean_commits":22.25,"dds":0.2808988764044944,"last_synced_commit":"4aebf0b3e6eb2009e46ff0f658f42de116236785"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timer-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timer-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timer-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-timer-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-timer-wrapper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578825,"owners_count":21127713,"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":["countdown","countdown-timer","react","react-component","react-indicators","react-timecode","react-timer","react-timer-wrapper","timer"],"created_at":"2024-10-01T15:35:45.454Z","updated_at":"2025-04-12T14:14:17.667Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","readme":"# ⏳ react-timer-wrapper\n\n![npm](https://img.shields.io/npm/v/react-timer-wrapper?style=flat-square)\n![NPM](https://img.shields.io/npm/l/react-timer-wrapper?style=flat-square)\n![npm](https://img.shields.io/npm/dt/react-timer-wrapper?style=flat-square)\n![Coveralls github](https://img.shields.io/coveralls/github/ryanhefner/react-timer-wrapper?style=flat-square)\n![CircleCI](https://img.shields.io/circleci/build/github/ryanhefner/react-timer-wrapper?style=flat-square)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/ryanhefner/react-timer-wrapper?style=flat-square)\n\n\nComposable React Timer component that passes status props to children, in addition\nto some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track\ntime while active.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-timer-wrapper)\n\n```sh\nnpm install --save react-timer-wrapper\n```\n\nVia [Yarn](https://yarn.fyi/react-timer-wrapper)\n\n```sh\nyarn add react-timer-wrapper\n```\n\n## How to use\n\nThe `Timer` can be used in a couple different ways. You could use it as a standalone\ntimer and setup callbacks to trigger things to happen in your project. Or, wrap\nchild components in `Timer` component, where those children will receive\nprops passed in by the `Timer`.\n\nIt can be used as a countdown timer, which will fire the `onFinish` event upon\ncompletion. Or, you can use it to track the time that occurs while it’s active.\n\n### Properties\n\n* `active:Boolean` - Start/stop the timer. (Default: `false`)\n* `component:String | Element` - Element or React component used to render/wrap the children. (Default: `div`)\n* `duration:Number` - Enables countdown mode and is the number of milliseconds to count before firing `onFinish`. (Default: `10000`)\n* `loop:Boolean` - Enable looping of the countdown timer. (Default: `false`)\n* `time:Number` - Either used as a time offset for the duration when used as a countdown timer, or the initial time to start from when used for tracking time. (Default: `0`)\n* `onFinish:Function` - Callback fired when the timer has finished. (Fired in countdown mode only)\n* `onStart:Function` - Callback fired when the timer is started.\n* `onStop:Function` - Callback fired when the timer is stopped.\n* `onTimeUpdate:Function` - Callback fired when time updates.\n\n### Examples\n\n#### Standalone\n\n```js\nimport Timer from 'react-timer-wrapper';\n\n...\n\n  onTimerStart({duration, progress, time}) {\n\n  }\n\n  onTimerStop({duration, progress, time}) {\n\n  }\n\n  onTimerTimeUpdate({duration, progress, time}) {\n\n  }\n\n  onTimerFinish({duration, progress, time}) {\n\n  }\n\n  render() {\n    const {\n      timerActive,\n    } = this.state;\n\n    return (\n      \u003cTimer\n        active={timerActive}\n        onFinish={this.onTimerFinish}\n        onStart={this.onTimerStart}\n        onStop={this.onTimerStop}\n        onTimeUpdate={this.onTimerTimeUpdate}\n      /\u003e\n    );\n  }\n\n...\n\n```\n\n#### With children\n\n```js\nimport Timer from 'react-timer-wrapper';\nimport CircleIndicator from 'react-indicators';\n\n...\n\n  render() {\n    const {\n      timerShouldRun,\n    } = this.state;\n\n    return (\n      \u003cTimer active={timerShouldRun}\u003e\n        \u003cCircleIndicator /\u003e\n      \u003c/Timer\u003e\n    );\n  }\n\n...\n\n```\n\n### Children\n\nThe `Timer` allows you to easily compose components that provide a visual\nstatus of the timer. Each children receives the following props that you can use\nto communicate the status of the timer.\n\n* `duration:Number` - Duration of the countdown timer. _(Available for countdown timers only, `null` passed when used for time tracking)_\n* `progress:Number` - Current percentage of timer complete. _(Available for countdown timers only, `null` passed when used for time tracking)_\n* `time:Number` - Current time on the timer in milliseconds.\n\n## Pairs well with...\n\n* [react-indicators](https://github.com/ryanhefner/react-indicators)\n* [react-timecode](https://github.com/ryanhefner/react-timecode)\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-timer-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-timer-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-timer-wrapper/lists"}