{"id":21078833,"url":"https://github.com/albert-gonzalez/easytimer-react-hook","last_synced_at":"2025-05-16T08:32:04.074Z","repository":{"id":57218954,"uuid":"346347884","full_name":"albert-gonzalez/easytimer-react-hook","owner":"albert-gonzalez","description":"React Hook that creates a timer using EasyTimer lib","archived":false,"fork":false,"pushed_at":"2023-08-29T11:09:17.000Z","size":1274,"stargazers_count":28,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-06T16:00:02.561Z","etag":null,"topics":["countdown","easytimer","javascript","stopwatch","timer","typescript"],"latest_commit_sha":null,"homepage":"https://albert-gonzalez.github.io/easytimer-react-hook/","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/albert-gonzalez.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":"2021-03-10T12:25:37.000Z","updated_at":"2024-03-21T17:58:37.000Z","dependencies_parsed_at":"2024-06-21T15:20:09.508Z","dependency_job_id":"a8e482f4-6215-45bf-8f9c-760d1431b907","html_url":"https://github.com/albert-gonzalez/easytimer-react-hook","commit_stats":{"total_commits":30,"total_committers":2,"mean_commits":15.0,"dds":"0.033333333333333326","last_synced_commit":"c7c760b64d3f714aa23966b80eb218b3cd229f4d"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albert-gonzalez%2Feasytimer-react-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albert-gonzalez%2Feasytimer-react-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albert-gonzalez%2Feasytimer-react-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albert-gonzalez%2Feasytimer-react-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albert-gonzalez","download_url":"https://codeload.github.com/albert-gonzalez/easytimer-react-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225415179,"owners_count":17470848,"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","easytimer","javascript","stopwatch","timer","typescript"],"created_at":"2024-11-19T19:42:35.830Z","updated_at":"2024-11-19T19:42:36.499Z","avatar_url":"https://github.com/albert-gonzalez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EasyTimer React Hook\n\n[EasyTimer](https://github.com/albert-gonzalez/easytimer.js) is a little library that allows to configure and manage a stopwatch or countdown. This React hook allows using EasyTimer with React in a very simple way.\n\n## Install\n\n```sh\nnpm install --save-dev easytimer-react-hook\n```\n\nThis hook needs React (\u003e= v16.8) and EasyTimer.js (\u003e= v4) in order to work:\n\n```sh\nnpm install --save-dev easytimer.js react\n```\n\n## Example\n\nYou can see a working example of this hook here: https://albert-gonzalez.github.io/easytimer-react-hook ([Source Code](./example))\n\n## Usage\n\nuseTimer hook will update the component every time that the EasyTimer instance changes its internal counter or when the target is achieved.\n\n```jsx\nimport useTimer from 'easytimer-react-hook';\n\nexport default () =\u003e {\n    /* The hook returns an EasyTimer instance and a flag to see if the target has been achieved */\n    const [timer, isTargetAchieved] = useTimer({\n        /* Hook configuration */\n    });\n\n    timer.start({\n        /* EasyTimer start configuration */\n    });\n\n    return \u003cdiv\u003e{timer.getTimeValues().toString()}\u003c/div\u003e;\n};\n```\n\n### Configuration\n\nuseTimer hook accepts an object with the following options:\n\n-   **startValues:** Optional. Object with the start values. The keys of these object are days, hours, minutes, seconds and secondTenths. The default value makes the timer to start from 0.\n-   **target:** Optional. Object with the target. When the timer achieves the target, it will stop automatically. The keys of these object are days, hours, minutes, seconds and secondTenths. If no target is passed, it will be disabled.\n-   **precision:** Optional. The frequency that the timer will update the component. The accepted precisions are hours, minutes, seconds and secondTenths. The default value is seconds.\n-   **countdown:** Optional. If true the timer will be a countdown. The default value is false.\n-   **updateWhenTargetAchieved:** Optional. If true the hook will update the component when the target is achieved. The default value is false.\n\n### EasyTimer instance\n\nuseTimer hook returns an EasyTimer instance. This instance is used to manage the timer (start, pause stop and reset the timer). Also, this instance can add custom event listeners if you need a specific behavior.\n\nCheck out the EasyTimer docs and examples here: https://github.com/albert-gonzalez/easytimer.js\n\n### TS Types\n\nuseTimer hook defines the following typescript types:\n\n```ts\ninterface TimerHookConfig {\n    startValues?: TimerValues;\n    target?: TimerValues;\n    precision?: Precision;\n    countdown?: boolean;\n    updateWhenTargetAchieved?: boolean;\n}\n\ndeclare type TimerHookReturn = [Timer, boolean];\n\ndeclare const useTimer: ({\n    startValues,\n    target,\n    precision,\n    countdown,\n    updateWhenTargetAchieved,\n}?: TimerHookConfig) =\u003e TimerHookReturn;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gonzalez%2Feasytimer-react-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbert-gonzalez%2Feasytimer-react-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbert-gonzalez%2Feasytimer-react-hook/lists"}