{"id":15679256,"url":"https://github.com/yassinedoghri/react-timer-machine","last_synced_at":"2025-05-07T10:21:03.328Z","repository":{"id":44357892,"uuid":"135809785","full_name":"yassinedoghri/react-timer-machine","owner":"yassinedoghri","description":"React Timer Machine is a fully controllable and customizable timer component for react","archived":false,"fork":false,"pushed_at":"2022-07-10T09:38:02.000Z","size":1920,"stargazers_count":12,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-24T19:01:54.365Z","etag":null,"topics":["countdown","react","react-component-library","stopwatch","timer"],"latest_commit_sha":null,"homepage":"https://react-timer-machine.yassinedoghri.com","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/yassinedoghri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-02T10:49:18.000Z","updated_at":"2023-06-23T16:35:54.000Z","dependencies_parsed_at":"2022-09-15T09:21:36.215Z","dependency_job_id":null,"html_url":"https://github.com/yassinedoghri/react-timer-machine","commit_stats":null,"previous_names":["yassinedoghri/react-super-timer"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassinedoghri%2Freact-timer-machine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassinedoghri%2Freact-timer-machine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassinedoghri%2Freact-timer-machine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yassinedoghri%2Freact-timer-machine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yassinedoghri","download_url":"https://codeload.github.com/yassinedoghri/react-timer-machine/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252542066,"owners_count":21764907,"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","react","react-component-library","stopwatch","timer"],"created_at":"2024-10-03T16:27:48.603Z","updated_at":"2025-05-07T10:21:03.304Z","avatar_url":"https://github.com/yassinedoghri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e⌛ react-timer-machine\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n**React Timer Machine is a fully controllable and customizable timer component for react**\n\n[![npm-badge]][npm]\u0026nbsp;[![deploy-badge]][deploy]\u0026nbsp;[![test-suite-badge]][test-suite]\u0026nbsp;[![maintainability-badge]][maintainability]\u0026nbsp;[![test-coverage-badge]][test-coverage]\u0026nbsp;[![license-badge]][license]\u0026nbsp;[![stars-badge]][stars]\n\n\u003c/div\u003e\n\n## Install\n\n```bash\nnpm install --save react-timer-machine\n```\n\nor\n\n```bash\nyarn add react-timer-machine\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from \"react\";\n\nimport TimerMachine from \"react-timer-machine\";\n\nimport moment from \"moment\";\nimport momentDurationFormatSetup from \"moment-duration-format\";\n\nmomentDurationFormatSetup(moment);\n\nclass Example extends Component {\n  render() {\n    return (\n      \u003cTimerMachine\n        timeStart={10 * 1000} // start at 10 seconds\n        timeEnd={20 * 1000} // end at 20 seconds\n        started={true}\n        paused={false}\n        countdown={false} // use as stopwatch\n        interval={1000} // tick every 1 second\n        formatTimer={(time, ms) =\u003e\n          moment.duration(ms, \"milliseconds\").format(\"h:mm:ss\")\n        }\n        onStart={(time) =\u003e\n          console.info(`Timer started: ${JSON.stringify(time)}`)\n        }\n        onStop={(time) =\u003e\n          console.info(`Timer stopped: ${JSON.stringify(time)}`)\n        }\n        onTick={(time) =\u003e console.info(`Timer ticked: ${JSON.stringify(time)}`)}\n        onPause={(time) =\u003e\n          console.info(`Timer paused: ${JSON.stringify(time)}`)\n        }\n        onResume={(time) =\u003e\n          console.info(`Timer resumed: ${JSON.stringify(time)}`)\n        }\n        onComplete={(time) =\u003e\n          console.info(`Timer completed: ${JSON.stringify(time)}`)\n        }\n      /\u003e\n    );\n  }\n}\n```\n\n## User guide\n\n### TimerMachine\n\nRenders a [React Fragment](https://reactjs.org/docs/fragments.html) to be fully customized.\nYou can easily style the timer states thanks to the provided function callbacks.\n\nBy default, TimerMachine displays the time formatted as: `hh:mm:ss.SSS`.\nThe format can be changed using the `formatTimer` property. [See usage example](#usage) above.\n\n### Props\n\n| Name                 | Type       | Default                                        | Description                                                                                                    |\n| -------------------- | ---------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| timeStart `required` | `number`   | -                                              | The initial time on which the timer is set (in ms)                                                             |\n| timeEnd              | `number`   | `0`                                            | The time on which the timer will complete (in ms)                                                              |\n| countdown            | `boolean`  | `false`                                        | When `true`, sets the timer to countdown instead of counting up                                                |\n| interval             | `number`   | `1000`                                         | The time between each ticks (in ms)                                                                            |\n| started              | `boolean`  | `false`                                        | Starts the timer when set to `true`, stops it when set to `false`                                              |\n| paused               | `boolean`  | `false`                                        | Pauses the timer when set to `true`, resumes it when set to `false`                                            |\n| formatTimer          | `function` | `(timer: Timer, ms: number) =\u003e 'hh:mm:ss.SSS'` | Function to format the timer before it renders. You can use [moment-duration] as shown above or write your own |\n| onStart              | `function` | `(timer: Timer) =\u003e void`                       | Callback function called on timer start                                                                        |\n| onTick               | `function` | `(timer: Timer) =\u003e void`                       | Callback function called on each timer tick                                                                    |\n| onPause              | `function` | `(timer: Timer) =\u003e void`                       | Callback function called on timer pause                                                                        |\n| onResume             | `function` | `(timer: Timer) =\u003e void`                       | Callback function called when timer resumes                                                                    |\n| onStop               | `function` | `(timer: Timer) =\u003e void`                       | Callback function called on timer stop                                                                         |\n| onComplete           | `function` | `(timer: Timer) =\u003e void`                       | Callback function called on timer complete                                                                     |\n\n[moment-duration]: https://github.com/jsmreese/moment-duration-format\n\n### Types\n\n| Name           | Example values                  |\n| -------------- | ------------------------------- |\n| Timer `object` | `{ h: 1, m: 30, s: 30, ms: 0 }` |\n\n## Versioning\n\nreact-timer-machine is maintained under [the Semantic Versioning guidelines](http://semver.org/).\n\n## Contributing\n\nLove react-timer-machine and would like to help? Check out the [contribution guidelines for this project](./CONTRIBUTING.md), everything should be there!\n\n## Contributors\n\n**Yassine Doghri** _(creator)_\n\n- [https://yassinedoghri.com](https://yassinedoghri.com)\n- [https://twitter.com/yassinedoghri](https://twitter.com/yassinedoghri)\n- [https://github.com/yassinedoghri](https://github.com/yassinedoghri)\n\n## Copyright and licence\n\nCode and documentation copyright 2018, [Yassine Doghri](https://github.com/yassinedoghri). Code released under the MIT License.\n\n[npm]: https://www.npmjs.com/package/react-timer-machine\n[npm-badge]: https://img.shields.io/npm/v/react-timer-machine.svg\n[deploy]: https://github.com/yassinedoghri/react-timer-machine/actions/workflows/deploy.yml\n[deploy-badge]: https://img.shields.io/github/workflow/status/yassinedoghri/react-timer-machine/react-timer-machine-deploy-example/main?label=deploy\n[test-suite]: https://github.com/yassinedoghri/react-timer-machine/actions/workflows/test.yml\n[test-suite-badge]: https://img.shields.io/github/workflow/status/yassinedoghri/react-timer-machine/react-timer-machine-test-suite/main?label=test%20suite\n[maintainability]: https://codeclimate.com/github/yassinedoghri/react-timer-machine/maintainability\n[maintainability-badge]: https://api.codeclimate.com/v1/badges/67abb76788a89f4805fc/maintainability\n[test-coverage]: https://codeclimate.com/github/yassinedoghri/react-timer-machine/test_coverage\n[test-coverage-badge]: https://api.codeclimate.com/v1/badges/67abb76788a89f4805fc/test_coverage\n[license]: https://opensource.org/licenses/MIT\n[license-badge]: https://img.shields.io/badge/License-MIT-blue.svg\n[stars]: https://github.com/yassinedoghri/react-timer-machine/stargazers\n[stars-badge]: https://img.shields.io/github/stars/yassinedoghri/react-timer-machine?style=social\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyassinedoghri%2Freact-timer-machine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyassinedoghri%2Freact-timer-machine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyassinedoghri%2Freact-timer-machine/lists"}