react-timing-hooks - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

package.json

 {
   "name": "react-timing-hooks",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "React hooks for setTimeout, setInterval, requestAnimationFrame, requestIdleCallback",
@@ -28,6 +28,4 @@ "main": "dist/index.js",
     "react",
-    "hook",
+    "interval",
     "timeout",
-    "interval",
-    "timing",
     "effect",
@@ -38,3 +36,5 @@ "loop",
     "requestAnimationFrame",
-    "requestIdleCallback",
+    "idle",
+    "callback",
+    "rendering",
     "rate-limiting",
@@ -45,3 +45,6 @@ "clock",
     "debounce",
-    "time"
+    "time",
+    "timing",
+    "setInterval",
+    "hook"
   ],
@@ -48,0 +51,0 @@ "author": "Eric Lambrecht",

README.md

@@ -8,7 +8,7 @@ <img alt="logo" src="https://github.com/EricLambrecht/react-timing-hooks/raw/main/logo.png" width="680" />
 
-## Wow! What's this?!
+## What's this?!
 
 This is a very little package with **React hooks wrapping time-related Vanilla JS functions**, 
 so you can use them with minimal effort in your React apps without having to worry about manual 
-clean up, or writing code to pause/resume intervals etc.
+clean up, or writing boilerplate to pause/resume intervals etc.
 
@@ -18,6 +18,6 @@ ### Feature Overview
 * Several React hooks **wrapping Vanilla JS functions** like:
-  * [`useInterval()`][interval-api]
-  * [`useTimeout()`][timeout-api]
-  * [`useAnimationFrame()`][raf-api]
-  * [`useIdleCallback()`][idle-cb-api], 
+  * setInterval() – [All Hooks][interval-api] | [MDN][interval-mdn]
+  * setTimeout() – [All Hooks][timeout-api] | [MDN][timeout-mdn]
+  * window.requestAnimationFrame() – [All Hooks][raf-api] | [MDN][raf-mdn]
+  * window.requestIdleCallback() – [All Hooks][idle-cb-api] | [MDN][idle-cb-mdn]
 * …and **additional [utility hooks][all-hooks]** for things like
@@ -54,3 +54,3 @@ * rate-limiting: `useDebounce()`, `useThrottle()`
 
-https://ericlambrecht.github.io/react-timing-hooks/migrations/
+https://ericlambrecht.github.io/react-timing-hooks/migrations/v3v4.html
 
@@ -61,3 +61,2 @@ ## Examples
 ```jsx harmony
-import { useState } from 'react'
 import { useInterval } from 'react-timing-hooks'
@@ -76,2 +75,3 @@
 ```
+----
 
@@ -81,3 +81,2 @@ #### Throttle a button click with `useThrottle()`
 ```jsx harmony
-import { useState } from 'react'
 import { useThrottle } from 'react-timing-hooks'
@@ -87,4 +86,5 @@
   const [result, setResult] = useState(null)
-  const printResult = () => setOutput(extremeMegaCalculation())
-  const onButtonClick = useThrottle(printResult, 1000)
+  const updateResult = () => setResult(extremeMegaCalculation())
+  
+  const onButtonClick = useThrottle(updateResult, 1000)
 
@@ -97,6 +97,6 @@ return <div>
 ```
+----
 
 #### Display the user's browsing time using `useTimer()` 
 ```jsx harmony
-import { useState } from 'react'
 import { useTimer } from 'react-timing-hooks'
@@ -106,9 +106,11 @@
   const [elapsedSeconds] = useTimer(0, { startOnMount: true })
-  return <span>You've been browsing this page for {elapsedSeconds} seconds.</span>
+  return <span>
+    You've been browsing this page for {elapsedSeconds} seconds.
+  </span>
 }
 ```
+----
 
 #### Display the current time with `useClock()`
 ```jsx harmony
-import { useState } from 'react'
 import { useTimeout } from 'react-timing-hooks'
@@ -123,2 +125,3 @@
 ```
+----
 
@@ -128,3 +131,2 @@ #### A canvas renderer using `useAnimationFrameLoop()`
 ```jsx harmony
-import { useRef } from 'react'
 import { useAnimationFrameLoop } from 'react-timing-hooks'
@@ -164,4 +166,10 @@
 This library is supposed to give you easy access to those time-related functionalities while keeping your code clean and concise. 
-You will **not** have to manually clean up timers or intervals (but you still can!).
-Additionally, many frequent use cases have their own utility hook, like `useClock` or `useAnimationFrameLoop`.
+You will **not** have to manually clean up timers or intervals.
+
+Another common use-case is pausing/resuming or starting/stopping intervals (or loops). This lib offers
+callbacks for that. So pausing is really just a matter of calling a `pause()` function for example.
+
+Many frequent use cases also have their own utility hook, like `useThrottle`, `useCountdown` or `useAnimationFrameLoop`
+to make things even easier.
+
 Needless to say, every hook is already tested and typed (so you don't have to).
@@ -171,49 +179,75 @@
 
-A simple timeout triggered by a button click for example would usually be written like so:
+A simple interval that increments a counter on every second and can be manually started upon user input:
 
+#### Before
+
 ```jsx harmony
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
-const TimeoutRenderer = () => {
-  const [isHidden, setIsHidden] = useState(false)
-  const [id, setId] = useRef(null)
-  const onButtonClick = () => {
-    id.current = setTimeout(() => setOutput('Hello World'), 1000)
-  }
-  
-  // clean up the timeout on unmount
+const Counter = () => {
+  const [counter, setCounter] = useState(0)
+  const [startInterval, setStartInterval] = useState(false)
+  const intervalId = useRef(null)
+
   useEffect(() => {
-    return () => {
-      clearTimeout(id.current)
+    if (startInterval) {
+      intervalId.current = setInterval(() => setCounter(c => c + 1), 1000)
     }
-  }, [id])
-    
-  return <div>
-    <button onClick={onButtonClick}>Start timeout!</button>
-    {isHidden && <p>Hide this message!</p>}
-  </div>
+  }, [startInterval])
+
+  useEffect(() => {
+    return function onUnmount() {
+      if (intervalId.current !== null) {
+        clearInterval(intervalId.current)
+      }
+    }
+  }, [intervalId])
+
+  return <>
+    <button onClick={() => setStartInterval(true)}>Start counting</button>
+    <p>{counter}</p>
+  </>   
 }
 ```
 
-With `react-timing-hooks` it would look like this:
+#### After
 
 ```jsx harmony
 import { useState } from 'react'
-import { useTimeout } from 'react-timing-hooks'
+import { useInterval } from 'react-timing-hooks'
 
-const TimeoutRenderer = () => {
-  const [isHidden, setIsHidden] = useState(false)
-  const onButtonClick = useTimeout(() => setOutput('Hello World'), 1000)
+const Counter = () => {
+  const [counter, setCounter] = useState(0)
+  
+  const { start } = useInterval(() => setCounter(c => c + 1), 1000)
 
-  return <div>
-    <button onClick={onButtonClick}>Start timeout!</button>
-    {isHidden && <p>Hide this message!</p>}
-  </div>
+  return <>
+    <button onClick={start}>Start counting</button>
+    <p>{counter}</p>
+  </>
 }
 ```
 
+Well,… actually, there is even a shorter way using the utility hook `useTimer()` 🙈
+
+#### After After
+
+```jsx harmony
+import { useCounter } from 'react-timing-hooks'
+
+const Counter = () => {
+  const [counter, { start }] = useTimer(0)
+
+  return <>
+    <button onClick={start}>Start counting</button>
+    <p>{counter}</p>
+  </>
+}
+```
+----
+
 **Another example:** You might have a timeout that runs under a certain condition. In this case a cleanup
 has to be done in a separate `useEffect` call that cleans everything up (but only on unmount).
 
-Your code could look like this:
+#### Before
 
@@ -247,3 +281,3 @@ ```jsx harmony
 
-With `react-timing-hooks` you can just write:
+#### After
 
@@ -261,3 +295,4 @@ ```jsx harmony
     }
-    // you could even add more timeouts in this effect without any more boilerplate
+    // you could even add more timeouts in this effect 
+    // without any more boilerplate
   }, [depA, depB])
@@ -264,0 +299,0 @@

No alert changes

Improved metrics

Total package byte prevSize

69010

increased by0.95%

Number of lines in readme file

330

increased by11.86%

No dependency changes