react-timing-hooks - npm Package Compare versions

Comparing version 3.1.4 to 3.1.5

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [3.1.5](https://github.com/EricLambrecht/react-timing-hooks/compare/v3.1.0...v3.1.5) (2022-12-10)
+
+NPM Readme update.
+
+## 3.1.4 (2022-12-09)
+
+Decreased npm package size.
+
 ## 3.1.2 (2022-12-09)
@@ -7,0 +15,0 @@

package.json

 {
   "name": "react-timing-hooks",
-  "version": "3.1.4",
+  "version": "3.1.5",
   "description": "React hooks for setTimeout, setInterval, requestAnimationFrame, requestIdleCallback",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,2 +0,2 @@
-<img src="https://github.com/EricLambrecht/react-timing-hooks/raw/master/logo.png" width="680" />
+<img alt="logo" src="https://github.com/EricLambrecht/react-timing-hooks/raw/master/logo.png" width="680" />
 
@@ -8,14 +8,24 @@ [![npm](https://flat.badgen.net/npm/v/react-timing-hooks)](https://www.npmjs.com/package/react-timing-hooks)
 
-## Features
+## Wow! What's this?!
 
-* Several React hooks wrapping 
-    * `requestAnimationFrame`
-    * `setTimeout`
-    * `setInterval`
-    * `requestIdleCallback`
-* Including "effect" versions and utility hooks like `useTimer`, `useAnimationFrameLoop`
-* Full Typescript support  
-* [Lightweight](https://bundlephobia.com/result?p=react-timing-hooks) (less than 1KB minzipped, no external dependencies)
-* Tree-shakable
+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, testing, or typing (if you use Typescript).
 
+### Feature Overview
+
+* Several React hooks **wrapping Vanilla JS functions** like:
+  * `requestAnimationFrame()`
+  * `setTimeout()`
+  * `setInterval()`
+  * `requestIdleCallback()`
+* **Versatile API**, often including "callback" _and_ "effect" versions
+* Additional **utility hooks** like `useTimer`, `useAnimationFrameLoop` or `useClock`
+* Full **Typescript** support
+* **[Lightweight](https://bundlephobia.com/result?p=react-timing-hooks)** (less than 1KB minzipped, no transitive dependencies!)
+* **Tree-shakable** — You only bundle what you use!
+* ... and it **saves a lot of code**
+  * **Automatic clean-ups** of pending timers, intervals etc. (e.g. if your component un-mounts before a timer triggers)
+  * callbacks are automatically **memoized**
+  * All hooks are already **tested**
+
+
 ## Installation
@@ -31,6 +41,69 @@
 
-## Usage
-   
+### Documentation
+
+[https://ericlambrecht.github.io/react-timing-hooks/](https://ericlambrecht.github.io/react-timing-hooks/)
+
+
+## Examples
+
+#### `useTimeout()`: Delay a button click action
 ```jsx harmony
 import { useState } from 'react'
+import { useTimeout } from 'react-timing-hooks'
+
+const TimeoutRenderer = () => {
+  const [output, setOutput] = useState(null)
+  const onButtonClick = useTimeout(() => setOutput('Hello World'), 1000)
+
+  return <div>
+    <button onClick={onButtonClick}>Start timeout!</button>
+    <p>{output}</p>
+  </div>
+}
+```
+
+#### `useTimeout()`: Delay a button click action
+```jsx harmony
+import { useState } from 'react'
+import { useTimeout } from 'react-timing-hooks'
+
+const TimeoutRenderer = () => {
+  const [output, setOutput] = useState(null)
+  const onButtonClick = useTimeout(() => setOutput('Hello World'), 1000)
+
+  return <div>
+    <button onClick={onButtonClick}>Start timeout!</button>
+    <p>{output}</p>
+  </div>
+}
+```
+
+#### `useTimer`: Display how long the user has been browsing
+```jsx harmony
+import { useState } from 'react'
+import { useTimer } from 'react-timing-hooks'
+
+const BrowsingTime = () => {
+  const elapsedSeconds = useTimer()
+  return <span>You've been browsing this page for {elapsedSeconds} seconds.</span>
+}
+```
+
+#### `useClock`: Display the current time, in real-time
+```jsx harmony
+import { useState } from 'react'
+import { useTimeout } from 'react-timing-hooks'
+
+const Clock = () => {
+  // This will show a time like 1:13:56 PM (supports localized formats as well).
+  // The displayed time will update every second
+  const currentTime = useClock()
+  return <span>{currentTime}</span>
+}
+```
+
+#### `useAnimationFrameLoop`: Create an animation frame loop
+
+```jsx harmony
+import { useState } from 'react'
 import { useAnimationFrameLoop } from 'react-timing-hooks'
@@ -57,12 +130,59 @@
 
-## Documentation
+## Why does this exist?
 
-[https://ericlambrecht.github.io/react-timing-hooks/](https://ericlambrecht.github.io/react-timing-hooks/)
-   
-## Why bother?
+I was once working for a company where the project required lots of timeouts and such. I quickly noticed that 
+writing a timeout or anything similar requires a lot of **boilerplate** (if you don't do it quick and dirty).
+Dan Abramov showcased this in [one of his blogposts](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) a while a go.
 
-Writing a timeout or anything similar requires a lot of boilerplate (if you don't do it quick and dirty).
-This library is supposed to give you easy access to those functionalities while keeping your code clean.
+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`.
+Needless to say, every hook is already tested and typed (so you don't have to).
 
-For example: You might have a timeout that runs under a certain condition. In this case a cleanup
+### Some "Before-/After-Code"
+
+A simple timeout triggered by a button click for example would usually be written like so:
+
+```jsx harmony
+import { useEffect } 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
+  useEffect(() => {
+    return () => {
+      clearTimeout(id.current)
+    }
+  }, [id])
+    
+  return <div>
+    <button onClick={onButtonClick}>Start timeout!</button>
+    {isHidden && <p>Hide this message!</p>}
+  </div>
+}
+```
+
+With `react-timing-hooks` it would look like this:
+
+```jsx harmony
+import { useState } from 'react'
+import { useTimeout } from 'react-timing-hooks'
+
+const TimeoutRenderer = () => {
+  const [isHidden, setIsHidden] = useState(false)
+  const onButtonClick = useTimeout(() => setOutput('Hello World'), 1000)
+
+  return <div>
+    <button onClick={onButtonClick}>Start timeout!</button>
+    {isHidden && <p>Hide this message!</p>}
+  </div>
+}
+```
+
+**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).
@@ -78,3 +198,3 @@
   const timeoutId = useRef(null)
-  
+
   useEffect(() => {
@@ -85,3 +205,3 @@ if (depA && depB) {
   }, [depA, depB])
-  
+
   useEffect(() => {
@@ -94,3 +214,3 @@ return function onUnmount() {
   }, [timeoutId])
-    
+
   return output ? (
@@ -111,8 +231,9 @@ <div>{output}</div>
 
-  useTimeoutEffect((timeout) => {
+  useTimeoutEffect((timeout, clearAll) => {
     if (depA && depB) {
       timeout(() => setOutput('Hello World'), 1000)
     }
+    // you could even add more timeouts in this effect without any more boilerplate
   }, [depA, depB])
-    
+
   return output ? (
@@ -136,3 +257,4 @@ <div>{output}</div>
 
-// the following effect will run only when "foo" changes, just as expected. "onFooChange" is memoized and safe to use in a dependency array.
+// the following effect will run only when "foo" changes, just as expected.
+// "onFooChange" is memoized and safe to use in a dependency array.
 useEffect(() => {
@@ -142,6 +264,12 @@ onFooChange()
 ```
-  
 
+### Bundle Size
+
+The whole lib is tree-shakable, i.e. only hooks you actually use end up in your bundle.
+So far, we also do not use any transitive dependencies. So don't worry about the bundle size.
+
+But check for yourself: https://bundlephobia.com/result?p=react-timing-hooks
+
 ## Contributing
 
 see [CONTRIBUTING.md](https://github.com/EricLambrecht/react-timing-hooks/blob/master/CONTRIBUTING.md)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43964

increased by11.65%

Number of lines in readme file

267

increased by92.09%

No dependency changes