react-timing-hooks - npm Package Compare versions

Comparing version 0.1.0-alpha.4 to 0.1.0-alpha.5

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [0.1.0-alpha.5](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.0-alpha.4...v0.1.0-alpha.5) (2019-11-07)
+
+
+### Bug Fixes
+
+* Fix documentation ([f82e428](https://github.com/EricLambrecht/react-timing-hooks/commit/f82e42861df397f400dc17b44e29ae83e8c5b2e5))
+
 ## [0.1.0-alpha.4](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.0-alpha.3...v0.1.0-alpha.4) (2019-11-07)
@@ -7,0 +14,0 @@

package.json

 {
   "name": "react-timing-hooks",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.5",
   "description": "React hooks for creating timing-related effects (setTimeout, setInterval, requestAnimationFrame, requestIdleCallback)",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -16,50 +16,9 @@ # react-timing-hooks
 
-See [docs](#Documentation)
+## Table of Contents
+* [Docs and examples](#Documentation)
+  * [useTimeoutEffect](#usetimeouteffecteffectcallback-deps)
+  * [useInterval](#useintervalintervalcallback-delay)
+  * [useIdleCallbackEffect](#useidlecallbackeffecteffectcallback-deps)
+* [Why bother?](#why-bother)
 
-## Examples
-
-You often have timeouts that run under a certain condition. In these cases a cleanup
-often has to be done in a separate `useEffect` call that really only cleans up on
-unmount. 
-
-You might have code like this for example:
-
-```javascript
-  import { useEffect } from 'react'
-
-  // ... 
-
-  const timeoutId = useRef(null)
-
-  useEffect(() => {
-    if (depA && depB) {
-      timeoutId.current = setTimeout(() => doSomething(), 1000)
-    }
-  }, [depA, depB])
-
-  useEffect(() => {
-    return function onUnmount() {
-      if (timeoutId.current !== null) {
-        clearTimeout(timeoutId.current)
-      }
-    }
-  }, [timeoutId])
-```
-
-With `react-timing-hooks` you can just write:
-
-```javascript
-  import { useTimeoutEffect } from 'react-timing-hooks'
-
-  // ... 
-  
-  useTimeoutEffect((timeout) => {
-    if (depA && depB) {
-      timeout(() => doSomething(), 1000)
-    }
-  }, [depA, depB])
-```
-
-`react-timing-hooks` will automatically take care of cleaning up the timeouts for you.
-
 ## Documentation
@@ -120,1 +79,50 @@
 ```
+
+
+## Why bother?
+
+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.
+
+For 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:
+
+```javascript
+  import { useEffect } from 'react'
+
+  // ... 
+
+  const timeoutId = useRef(null)
+
+  useEffect(() => {
+    if (depA && depB) {
+      timeoutId.current = setTimeout(() => doSomething(), 1000)
+    }
+  }, [depA, depB])
+
+  useEffect(() => {
+    return function onUnmount() {
+      if (timeoutId.current !== null) {
+        clearTimeout(timeoutId.current)
+      }
+    }
+  }, [timeoutId])
+```
+
+With `react-timing-hooks` you can just write:
+
+```javascript
+  import { useTimeoutEffect } from 'react-timing-hooks'
+
+  // ... 
+  
+  useTimeoutEffect((timeout) => {
+    if (depA && depB) {
+      timeout(() => doSomething(), 1000)
+    }
+  }, [depA, depB])
+```
+
+In this case `react-timing-hooks` automatically took care of cleaning up the timeout for you (if the component is mounted for less than a second for instance).

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21099

increased by4.07%

Number of lines in readme file

127

increased by6.72%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes