@devil7softwares/react-drifter-stars - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.es.js

@@ -476,2 +476,3 @@ import React, { useRef, useEffect } from 'react';
     noiseStrength: 1,
+    motionEnabled: true,
 };
@@ -493,2 +494,12 @@ /**
     const noiseRef = useRef(0);
+    const mouseEventHandlerRef = useRef(function (e) {
+        mouseRef.current.x = e.clientX;
+        mouseRef.current.y = e.clientY;
+    });
+    const deviceOrientHandlerRef = useRef(function (e) {
+        if (canvasRef.current && e.beta && e.gamma) {
+            mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
+            mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
+        }
+    });
     function initialize() {
@@ -542,15 +553,13 @@ if (canvasRef.current && contextRef.current) {
             // Motion mode
-            if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
-                window.addEventListener('deviceorientation', function (e) {
-                    if (canvasRef.current && e.beta && e.gamma) {
-                        mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
-                        mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
-                    }
-                }, true);
+            if (((motion === null || motion === void 0 ? void 0 : motion.enabled) == undefined && defaultProps.motionEnabled) || (motion === null || motion === void 0 ? void 0 : motion.enabled)) {
+                if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
+                    window.addEventListener('deviceorientation', deviceOrientHandlerRef.current, true);
+                }
+                else {
+                    document.body.addEventListener('mousemove', mouseEventHandlerRef.current);
+                }
             }
             else {
-                document.body.addEventListener('mousemove', function (e) {
-                    mouseRef.current.x = e.clientX;
-                    mouseRef.current.y = e.clientY;
-                });
+                window.removeEventListener('deviceorientation', deviceOrientHandlerRef.current);
+                document.body.removeEventListener('mousemove', mouseEventHandlerRef.current);
             }
@@ -557,0 +566,0 @@ (function animloop() {

dist/index.js

@@ -484,2 +484,3 @@ 'use strict';
     noiseStrength: 1,
+    motionEnabled: true,
 };
@@ -501,2 +502,12 @@ /**
     const noiseRef = React.useRef(0);
+    const mouseEventHandlerRef = React.useRef(function (e) {
+        mouseRef.current.x = e.clientX;
+        mouseRef.current.y = e.clientY;
+    });
+    const deviceOrientHandlerRef = React.useRef(function (e) {
+        if (canvasRef.current && e.beta && e.gamma) {
+            mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
+            mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
+        }
+    });
     function initialize() {
@@ -550,15 +561,13 @@ if (canvasRef.current && contextRef.current) {
             // Motion mode
-            if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
-                window.addEventListener('deviceorientation', function (e) {
-                    if (canvasRef.current && e.beta && e.gamma) {
-                        mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
-                        mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
-                    }
-                }, true);
+            if (((motion === null || motion === void 0 ? void 0 : motion.enabled) == undefined && defaultProps.motionEnabled) || (motion === null || motion === void 0 ? void 0 : motion.enabled)) {
+                if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
+                    window.addEventListener('deviceorientation', deviceOrientHandlerRef.current, true);
+                }
+                else {
+                    document.body.addEventListener('mousemove', mouseEventHandlerRef.current);
+                }
             }
             else {
-                document.body.addEventListener('mousemove', function (e) {
-                    mouseRef.current.x = e.clientX;
-                    mouseRef.current.y = e.clientY;
-                });
+                window.removeEventListener('deviceorientation', deviceOrientHandlerRef.current);
+                document.body.removeEventListener('mousemove', mouseEventHandlerRef.current);
             }
@@ -565,0 +574,0 @@ (function animloop() {

dist/index.umd.js

@@ -484,2 +484,3 @@ (function (global, factory) {
         noiseStrength: 1,
+        motionEnabled: true,
     };
@@ -501,2 +502,12 @@ /**
         const noiseRef = React.useRef(0);
+        const mouseEventHandlerRef = React.useRef(function (e) {
+            mouseRef.current.x = e.clientX;
+            mouseRef.current.y = e.clientY;
+        });
+        const deviceOrientHandlerRef = React.useRef(function (e) {
+            if (canvasRef.current && e.beta && e.gamma) {
+                mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
+                mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
+            }
+        });
         function initialize() {
@@ -550,15 +561,13 @@ if (canvasRef.current && contextRef.current) {
                 // Motion mode
-                if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
-                    window.addEventListener('deviceorientation', function (e) {
-                        if (canvasRef.current && e.beta && e.gamma) {
-                            mouseRef.current.x = canvasRef.current.clientWidth / 2 - (e.gamma / 90) * (canvasRef.current.clientWidth / 2) * 2;
-                            mouseRef.current.y = canvasRef.current.clientHeight / 2 - (e.beta / 90) * (canvasRef.current.clientHeight / 2) * 2;
-                        }
-                    }, true);
+                if (((motion === null || motion === void 0 ? void 0 : motion.enabled) == undefined && defaultProps.motionEnabled) || (motion === null || motion === void 0 ? void 0 : motion.enabled)) {
+                    if ('ontouchstart' in document.documentElement && window.DeviceOrientationEvent) {
+                        window.addEventListener('deviceorientation', deviceOrientHandlerRef.current, true);
+                    }
+                    else {
+                        document.body.addEventListener('mousemove', mouseEventHandlerRef.current);
+                    }
                 }
                 else {
-                    document.body.addEventListener('mousemove', function (e) {
-                        mouseRef.current.x = e.clientX;
-                        mouseRef.current.y = e.clientY;
-                    });
+                    window.removeEventListener('deviceorientation', deviceOrientHandlerRef.current);
+                    document.body.removeEventListener('mousemove', mouseEventHandlerRef.current);
                 }
@@ -565,0 +574,0 @@ (function animloop() {

dist/interface/IMotionOptions.d.ts

 export interface IMotionOptions {
     /**
+     * Enables/disables moving animation of particles.
+     */
+    enabled?: boolean;
+    /**
      * Amount of motion to be generated. Default is 0.05. Used to generate motion based on mouse movement/device orientation changes.
@@ -4,0 +8,0 @@ */

dist/stories/DrifterStars.stories.d.ts

@@ -204,4 +204,9 @@ import '../css/stories.css';
         };
+        motionEnabled: {
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;

package.json

 {
     "name": "@devil7softwares/react-drifter-stars",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "React version of Drifter Stars by Cory Hughart",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,2 +5,5 @@
 
+## Demo
+View Demos @ [Storybook](https://storybook.devil7softwares.com/?path=/story/drifter-stars)
+
 ## Quick Start
@@ -72,2 +75,3 @@ 1. Install package from NPM
 |-------------------|-------------------|---------------------------------------------------------------------------------------------------------------------------------------|
+| enabled           | boolean           | Enables/disables moving animation of particles.                                                                                       |
 | ratio             | number            | Amount of motion to be generated. Default is 0.05.<br/>Used to generate motion based on mouse movement/device orientation changes.    |
@@ -74,0 +78,0 @@ | randomMotion      | boolean           | Enables random motions even without user interation.                                                                                  |

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

289108

increased by1.32%

Lines of code

2448

increased by1.49%

Number of lines in readme file

83

increased by5.06%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes