![\"npm](\"https://badge.fury.io/js/react-use-precision-timer.svg\"){kind=icon}
\n ![\"View](\"https://img.shields.io/badge/GitHub-Source-success\"){kind=icon}
\n ![\"Deploy](\"https://github.com/justinmahar/react-use-precision-timer/workflows/Deploy/badge.svg\"){kind=icon}
\n\n \n \n
\n ![\"Buy](\"https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee&message=%E2%9D%A4&logo=KoFi&color=%23fe8e86\")
![\"Sponsor\"/](\"https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86\")
![\"Sponsor](\"https://justinmahar.github.io/react-kindling/support/sponsor.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-1.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-3.png\")
![\"Buy](\"https://justinmahar.github.io/react-kindling/support/coffee-5.png\")
\n\n\n\n## Table of Contents\n\n- [Documentation](#documentation)\n- [Overview](#overview)\n - [Features include:](#features-include)\n - [🆕 New In Version 3](#-new-in-version-3)\n- [Donate](#donate)\n- [Table of Contents](#table-of-contents)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n - [Repeating Timer](#repeating-timer)\n - [One-Time Delay](#one-time-delay)\n - [Stopwatch](#stopwatch)\n - [Momentary Boolean](#momentary-boolean)\n - [Other Usage](#other-usage)\n- [TypeScript](#typescript)\n- [Icon Attribution](#icon-attribution)\n- [Contributing](#contributing)\n- [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it)\n- [License](#license)\n\n## Installation\n\n```\nnpm i react-use-precision-timer\n```\n\n## Quick Start\n\n### Repeating Timer\n\n```jsx\nimport { useTimer } from \"react-use-precision-timer\";\n```\n\nIn your function component:\n\n```jsx\nconst callback = React.useCallback(() => console.log('Boom'), []);\n// The callback will be called every 1000 milliseconds.\nconst timer = useTimer({ delay: 1000 }, callback);\n```\n\nIn a handler or effect:\n\n```jsx\ntimer.start();\n```\n\nThe following functions can be used to control the [Timer](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usetimer--docs#timer):\n\n- `timer.start()` - Start the timer. If already started, will restart the timer. You can optionally pass a start time in Unix epoch milliseconds.\n- `timer.stop()` - Stop the timer.\n- `timer.pause()` - Pause the timer.\n- `timer.resume()` - Resume the timer.\n\nRefer to [Timer](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usetimer--docs#timer) for all available functions, including getters for elapsed times.\n\n### One-Time Delay\n\nIf you'd like to run a callback after a one-time delay, use the helper hook [useDelay](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usedelay--docs):\n\n```jsx\nimport { useDelay } from 'react-use-precision-timer';\n```\n\nIn your function component:\n\n```jsx\nconst callback = React.useCallback(() => console.log('Boom'), []);\n// Will call once after 1000ms.\nconst onceTimer = useDelay(1000, callback);\n```\n\nIn a handler or effect:\n\n```jsx\nonceTimer.start();\n```\n\nThis will call the callback after the provided 1000 millisecond delay only once.\n\n### Stopwatch\n\nThe timer also functions as a stopwatch when no delay is provided. You can use the helper hook [useStopwatch](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usestopwatch--docs):\n\n```jsx\nimport { useStopwatch } from \"react-use-precision-timer\";\n```\n\n```jsx\nconst stopwatch = useStopwatch();\n```\n\nUse `start()`, `stop()`, `pause()`, and `resume()` to control the stopwatch.\n\nStopwatch is a [Timer](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usetimer--docs#timer) object. Refer to Timer's getters to retrieve elapsed running time, paused time, and so forth.\n\nCalling start while a stopwatch is already running will restart it.\n\n### Momentary Boolean\n\nFor convenience, the [useMomentaryBool](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usemomentarybool--docs) hook has been included to momentarily toggle a boolean. This wraps the [useDelay](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usedelay--docs) hook.\n\nThis is very useful for momentary notifications, such as a copy button that shows a momentary checkmark to indicate the operation succeeded.\n\n```jsx\nimport { useMomentaryBool } from 'react-use-precision-timer';\n```\n\nIn your function component:\n\n```jsx\n// Toggle to true, then back to false after 1000ms.\nconst [value, toggle] = useMomentaryBool(false, 1000);\n```\n\nCalling `toggle()` will set the boolean to `true`, then back to `false` after a 1000 millisecond delay.\n\n### Other Usage\n\nSee [useTimer](https://justinmahar.github.io/react-use-precision-timer/?path=/story/docs-usetimer--docs) for all other hook options and timer functions.\n\n\n\n## TypeScript\n\nType definitions have been included for [TypeScript](https://www.typescriptlang.org/) support.\n\n\n\n\n\n## Icon Attribution\n\nFavicon by [Twemoji](https://github.com/twitter/twemoji).\n\n\n\n\n\n## Contributing\n\nOpen source software is awesome and so are you. 😎\n\nFeel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.\n\nFor major changes, open an issue first to discuss what you'd like to change.\n\n\n\n## ⭐ Found It Helpful? [Star It!](https://github.com/justinmahar/react-use-precision-timer/stargazers)\n\nIf you found this project helpful, let the community know by giving it a [star](https://github.com/justinmahar/react-use-precision-timer/stargazers): [👉⭐](https://github.com/justinmahar/react-use-precision-timer/stargazers)\n\n\nWant to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:\n\n \n\n\n\n## License\n\nSee [LICENSE.md](https://justinmahar.github.io/react-use-precision-timer/?path=/docs/license--docs).","readmeFilename":"README.md"}