react-timing-hooks - npm Package Compare versions

Comparing version 0.1.4 to 0.2.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [0.2.0](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.4...v0.2.0) (2020-03-18)
+
+
+### Features
+
+* useAnimationFrameLoop can now be stopped ([854c9fb](https://github.com/EricLambrecht/react-timing-hooks/commit/854c9fb2e454c174b1f250e2868ecb125d54a951)), closes [#1](https://github.com/EricLambrecht/react-timing-hooks/issues/1)
+
 ### [0.1.4](https://github.com/EricLambrecht/react-timing-hooks/compare/v0.1.2...v0.1.4) (2020-03-17)
@@ -7,0 +14,0 @@

dist/animation-frame/useAnimationFrameLoop.d.ts

 import { Callback } from '../types';
-declare const useAnimationFrameLoop: (callback: Callback) => void;
+declare const useAnimationFrameLoop: (callback: Callback, stop?: boolean) => void;
 export default useAnimationFrameLoop;

dist/animation-frame/useAnimationFrameLoop.js

@@ -17,18 +17,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     const react_1 = require("react");
-    const useAnimationFrameLoop = (callback) => {
+    const useAnimationFrameLoop = (callback, stop = false) => {
         const rafCallback = react_1.useRef(() => null);
+        const stopValue = react_1.useRef(false);
         react_1.useEffect(() => {
             rafCallback.current = callback;
-        }, [callback]);
+            stopValue.current = stop;
+        }, [callback, stop]);
         const nextCallback = react_1.useCallback(() => {
-            rafCallback.current();
-            next();
+            if (!stopValue.current) {
+                rafCallback.current();
+            }
+            runInLoop();
         }, []);
-        const runNextAnimationFrame = useAnimationFrame_1.default(nextCallback);
-        const next = react_1.useCallback(() => {
-            runNextAnimationFrame();
-        }, [runNextAnimationFrame]);
+        const runInLoop = useAnimationFrame_1.default(nextCallback);
         react_1.useEffect(() => {
-            next();
-        }, [next]);
+            runInLoop();
+        }, [runInLoop]);
     };
@@ -35,0 +36,0 @@ exports.default = useAnimationFrameLoop;

package.json

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

README.md

@@ -107,5 +107,6 @@ ![minified](https://badgen.net/bundlephobia/minzip/react-timing-hooks)
 
-### `useAnimationFrameLoop(callback)`
+### `useAnimationFrameLoop(callback, stop = false)`
 
 * `callback` - a function that will be invoked in an animation frame loop
+* `stop = false` - an optional parameter to stop/pause the loop. It can be resumed by setting it to false again.
 
@@ -116,6 +117,7 @@ Example:
 // Update canvas on every frame
+const [stop, setStop] = useState(false)
 const updateCanvas = () => { 
     // ... 
 }
-useAnimationFrameLoop(updateCanvas)
+useAnimationFrameLoop(updateCanvas, stop)
 ```
@@ -122,0 +124,0 @@

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

52333

increased by31.64%

Number of package files

46

increased by4.55%

Lines of code

422

increased by0.24%

Number of lines in readme file

220

increased by0.92%

No dependency changes