react-snowfall - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.1

CHANGELOG.md

@@ -5,8 +5,23 @@ # Changelog
 
-## [1.0.0-alpha.0](https://github.com/cahilfoley/snowfall/compare/v0.3.0...v1.0.0-alpha.0) (2019-06-09)
+### [1.0.1](https://github.com/cahilfoley/react-snowfall/compare/v1.0.0...v1.0.1) (2019-06-09)
 
 
+### Bug Fixes
+
+* **color:** read color from snowflake config ([60676a9](https://github.com/cahilfoley/react-snowfall/commit/60676a9))
+
+
+### Build System
+
+* **map:** publish source maps with build ([74f9162](https://github.com/cahilfoley/react-snowfall/commit/74f9162))
+* publish src with npm package ([7c49bd2](https://github.com/cahilfoley/react-snowfall/commit/7c49bd2))
+
+
+
+## [1.0.0](https://github.com/cahilfoley/react-snowfall/compare/v1.0.0-alpha.1...v1.0.0) (2019-06-09)
+
+
 ### refactor
 
-* convert library to use hooks ([0a45f70](https://github.com/cahilfoley/snowfall/commit/0a45f70))
+* convert library to use hooks ([0a45f70](https://github.com/cahilfoley/react-snowfall/commit/0a45f70))
 
@@ -20,4 +35,3 @@
 
-<a name="0.3.0"></a>
-# [0.3.0](https://github.com/cahilfoley/snowfall/compare/v0.2.0...v0.3.0) (2018-12-12)
+### [0.3.0](https://github.com/cahilfoley/react-snowfall/compare/v0.2.0...v0.3.0) (2018-12-12)
 
@@ -27,8 +41,7 @@
 
-* add wrapping in translate calculations ([62a16dd](https://github.com/cahilfoley/snowfall/commit/62a16dd))
+* add wrapping in translate calculations ([62a16dd](https://github.com/cahilfoley/react-snowfall/commit/62a16dd))
 
 
 
-<a name="0.2.0"></a>
-# [0.2.0](https://github.com/cahilfoley/snowfall/compare/v0.1.3...v0.2.0) (2018-12-11)
+### [0.2.0](https://github.com/cahilfoley/react-snowfall/compare/v0.1.3...v0.2.0) (2018-12-11)
 
@@ -38,8 +51,7 @@
 
-* update snowflake location based on time between frames ([49c2916](https://github.com/cahilfoley/snowfall/commit/49c2916))
+* update snowflake location based on time between frames ([49c2916](https://github.com/cahilfoley/react-snowfall/commit/49c2916))
 
 
 
-<a name="0.1.3"></a>
-## 0.1.3 (2018-12-09)
+#### 0.1.3 (2018-12-09)
 
@@ -49,3 +61,3 @@
 
-* **snowflake:** update speed interpolation smoothing ([816d4d7](https://github.com/cahilfoley/snowfall/commit/816d4d7))
-* add linear interpolation to speed and random speed shuffling ([47a1cd6](https://github.com/cahilfoley/snowfall/commit/47a1cd6))
+* **snowflake:** update speed interpolation smoothing ([816d4d7](https://github.com/cahilfoley/react-snowfall/commit/816d4d7))
+* add linear interpolation to speed and random speed shuffling ([47a1cd6](https://github.com/cahilfoley/react-snowfall/commit/47a1cd6))

lib/config.js

@@ -21,2 +21,3 @@ "use strict";
 var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
-exports.requestAnimationFrame = requestAnimationFrame;
+exports.requestAnimationFrame = requestAnimationFrame;
+//# sourceMappingURL=config.js.map

lib/hooks.d.ts

 import { MutableRefObject, CSSProperties } from 'react';
 import Snowflake from './Snowflake';
+/**
+ * A utility hook to manage creating and updating a collection of snowflakes
+ * @param canvasRef A ref to the canvas element
+ * @param amount The number of snowflakes
+ * @param config The configuration for each snowflake
+ */
 export declare const useSnowflakes: (canvasRef: MutableRefObject<HTMLCanvasElement | undefined>, amount: number, config: Partial<import("./Snowflake").SnowflakeProps>) => Snowflake[];
+/**
+ * Returns the height and width of a HTML element, uses the `ResizeObserver` api if available to detect changes to the
+ * size. Falls back to listening for resize events on the window.
+ * @param ref A ref to the HTML element to be measured
+ */
 export declare const useComponentSize: (ref: MutableRefObject<HTMLElement | undefined>) => {
@@ -8,2 +19,6 @@ height: number;
 };
+/**
+ * Utility hook that merges any provided styles with the default styles
+ * @param overrides The style prop passed into the component
+ */
 export declare const useSnowfallStyle: (overrides?: CSSProperties | undefined) => {
@@ -757,3 +772,1 @@ alignContent?: string | undefined;
 };
-/** Lifecycle hook that tracks if component is mounted. Returns a ref, which has a boolean `.current` property */
-export declare const useRefMounted: () => MutableRefObject<boolean>;

lib/hooks.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.useRefMounted = exports.useSnowfallStyle = exports.useComponentSize = exports.useSnowflakes = void 0;
+exports.useSnowfallStyle = exports.useComponentSize = exports.useSnowflakes = void 0;
 
@@ -39,7 +39,13 @@ var _react = require("react");
 
-var createSnowflakes = function createSnowflakes(canvas, amount, config) {
+/**
+ * A utility function to create a collection of snowflakes
+ * @param canvasRef A ref to the canvas element
+ * @param amount The number of snowflakes
+ * @param config The configuration for each snowflake
+ */
+var createSnowflakes = function createSnowflakes(canvasRef, amount, config) {
   var snowflakes = [];
 
   for (var i = 0; i < amount; i++) {
-    snowflakes.push(new _Snowflake["default"](canvas.current, config));
+    snowflakes.push(new _Snowflake["default"](canvasRef.current, config));
   }
@@ -49,7 +55,12 @@
 };
+/**
+ * A utility hook to manage creating and updating a collection of snowflakes
+ * @param canvasRef A ref to the canvas element
+ * @param amount The number of snowflakes
+ * @param config The configuration for each snowflake
+ */
 
+
 var useSnowflakes = function useSnowflakes(canvasRef, amount, config) {
-  var _useState = (0, _react.useState)(function () {
-    return createSnowflakes(canvasRef, amount, config);
-  }),
+  var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -86,3 +97,9 @@ snowflakes = _useState2[0],
 };
+/**
+ * Returns the height and width of a HTML element, uses the `ResizeObserver` api if available to detect changes to the
+ * size. Falls back to listening for resize events on the window.
+ * @param ref A ref to the HTML element to be measured
+ */
 
+
 exports.useSnowflakes = useSnowflakes;
@@ -122,3 +139,8 @@
 };
+/**
+ * Utility hook that merges any provided styles with the default styles
+ * @param overrides The style prop passed into the component
+ */
 
+
 exports.useComponentSize = useComponentSize;
@@ -132,18 +154,4 @@
 };
-/** Lifecycle hook that tracks if component is mounted. Returns a ref, which has a boolean `.current` property */
 
-
 exports.useSnowfallStyle = useSnowfallStyle;
-
-var useRefMounted = function useRefMounted() {
-  var refMounted = (0, _react.useRef)(false);
-  (0, _react.useEffect)(function () {
-    refMounted.current = true;
-    return function () {
-      refMounted.current = false;
-    };
-  }, []);
-  return refMounted;
-};
-
-exports.useRefMounted = useRefMounted;
+//# sourceMappingURL=hooks.js.map

lib/index.js

@@ -66,2 +66,3 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+//# sourceMappingURL=index.js.map

lib/Snowfall.js

@@ -27,7 +27,10 @@ "use strict";
   var canvasSize = (0, _hooks.useComponentSize)(canvasRef);
-  var mounted = (0, _hooks.useRefMounted)();
+  var animationFrame = (0, _react.useRef)(0);
   var lastUpdate = (0, _react.useRef)(Date.now());
-  var snowflakes = (0, _hooks.useSnowflakes)(canvasRef, snowflakeCount, {
-    color: color
-  });
+  var config = (0, _react.useMemo)(function () {
+    return {
+      color: color
+    };
+  }, [color]);
+  var snowflakes = (0, _hooks.useSnowflakes)(canvasRef, snowflakeCount, config);
 
@@ -38,6 +41,12 @@ var updateCanvasRef = function updateCanvasRef(element) {
 
-  var draw = (0, _react.useCallback)(function () {
+  var render = (0, _react.useCallback)(function () {
+    var framesPassed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
     var canvas = canvasRef.current;
 
     if (canvas) {
+      // Update the positions of the snowflakes
+      snowflakes.forEach(function (snowflake) {
+        return snowflake.update(canvas, framesPassed);
+      }); // Render them if the canvas is available
+
       var ctx = canvas.getContext('2d');
@@ -53,27 +62,17 @@
   }, [snowflakes]);
-  var update = (0, _react.useCallback)(function () {
-    var framesPassed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    var canvas = canvasRef.current;
-
-    if (canvas) {
-      snowflakes.forEach(function (snowflake) {
-        return snowflake.update(canvas, framesPassed);
-      });
-    }
-  }, [snowflakes]);
   var loop = (0, _react.useCallback)(function () {
-    if (mounted.current) {
-      // Update based on time passed so that a slow frame rate won't slow down the snowflake
-      var now = Date.now();
-      var msPassed = Date.now() - lastUpdate.current;
-      lastUpdate.current = now; // Frames that would have passed if running at 60 fps
+    // Update based on time passed so that a slow frame rate won't slow down the snowflake
+    var now = Date.now();
+    var msPassed = Date.now() - lastUpdate.current;
+    lastUpdate.current = now; // Frames that would have passed if running at 60 fps
 
-      var framesPassed = msPassed / _config.targetFrameTime;
-      update(framesPassed);
-      draw();
-      requestAnimationFrame(loop);
-    }
-  }, [draw, mounted, update]);
+    var framesPassed = msPassed / _config.targetFrameTime;
+    render(framesPassed);
+    animationFrame.current = requestAnimationFrame(loop);
+  }, [render]);
   (0, _react.useEffect)(function () {
-    return loop();
+    loop();
+    return function () {
+      return cancelAnimationFrame(animationFrame.current);
+    };
   }, [loop]);
@@ -89,2 +88,3 @@ return _react["default"].createElement("canvas", {
 var _default = Snowfall;
-exports["default"] = _default;
+exports["default"] = _default;
+//# sourceMappingURL=Snowfall.js.map

lib/Snowflake.d.ts

@@ -16,3 +16,2 @@ export interface SnowflakeProps {
     private readonly fullConfig;
-    resized: () => boolean;
     draw: (canvas: HTMLCanvasElement, inputCtx?: CanvasRenderingContext2D | undefined) => void;
@@ -19,0 +18,0 @@ private translate;

lib/Snowflake.js

@@ -53,6 +53,2 @@ "use strict";
 
-    _defineProperty(this, "resized", function () {
-      return _this.params.isResized = true;
-    });
-
     _defineProperty(this, "draw", function (canvas, inputCtx) {
@@ -64,5 +60,5 @@ var ctx = inputCtx || canvas.getContext('2d');
         ctx.arc(_this.params.x, _this.params.y, _this.params.radius, 0, 2 * Math.PI);
-        ctx.fillStyle = _this.params.color;
+        ctx.fillStyle = _this.fullConfig.color;
+        ctx.closePath();
         ctx.fill();
-        ctx.closePath();
       }
@@ -107,3 +103,2 @@ });
     var _this$fullConfig = this.fullConfig,
-        color = _this$fullConfig.color,
         radius = _this$fullConfig.radius,
@@ -113,3 +108,2 @@ _wind = _this$fullConfig.wind,
     this.params = {
-      color: color,
       x: (0, _utils.random)(0, _canvas.offsetWidth),
@@ -120,3 +114,2 @@ y: (0, _utils.random)(-_canvas.offsetHeight, 0),
       wind: _utils.random.apply(void 0, _toConsumableArray(_wind)),
-      isResized: false,
       nextSpeed: _utils.random.apply(void 0, _toConsumableArray(_wind)),
@@ -139,2 +132,3 @@ nextWind: _utils.random.apply(void 0, _toConsumableArray(_speed))
 var _default = Snowflake;
-exports["default"] = _default;
+exports["default"] = _default;
+//# sourceMappingURL=Snowflake.js.map

lib/typings/ResizeObserver.d.js

@@ -1,1 +0,2 @@
-"use strict";
+"use strict";
+//# sourceMappingURL=ResizeObserver.d.js.map

lib/utils.js

@@ -51,2 +51,3 @@ "use strict";
   };
-}
+}
+//# sourceMappingURL=utils.js.map

package.json

 {
   "name": "react-snowfall",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.1",
   "description": "A react component that creates a snowfall effect",
@@ -8,3 +8,3 @@ "main": "./lib/Snowfall.js",
     "generate-types": "tsc --emitDeclarationOnly --declarationDir ./lib",
-    "build": "npm run generate-types && babel ./src --out-dir lib --extensions \".ts,.tsx\"",
+    "build": "npm run generate-types && babel ./src --out-dir lib --extensions \".ts,.tsx\" --source-maps",
     "watch": "npm run build -- --watch",
@@ -15,3 +15,3 @@ "release": "standard-version"
     "type": "git",
-    "url": "git+https://github.com/cahilfoley/snowfall.git"
+    "url": "git+https://github.com/cahilfoley/react-snowfall.git"
   },
@@ -30,5 +30,5 @@ "publishConfig": {
   "license": "MIT",
-  "homepage": "https://github.com/cahilfoley/snowfall#readme",
+  "homepage": "https://github.com/cahilfoley/react-snowfall#readme",
   "bugs": {
-    "url": "https://github.com/cahilfoley/snowfall/issues"
+    "url": "https://github.com/cahilfoley/react-snowfall/issues"
   },
@@ -35,0 +35,0 @@ "peerDependencies": {

README.md

@@ -1,5 +0,7 @@
-![Snowfall Demo](./assets/snowfall-demo.gif)
+![Snowfall Demo](./assets/snowfall-demo-banner.gif)
 
-# Snowfall
+# React Snowfall
 
+[![npm](https://img.shields.io/npm/v/react-snowfall.svg)](https://github.com/cahilfoley/react-snowfall)
+[![GitHub stars](https://img.shields.io/github/stars/cahilfoley/react-snowfall.svg)](https://github.com/cahilfoley/react-snowfall/stargazers)
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
@@ -9,4 +11,4 @@
 
-- [Live Example](https://cahilfoley.github.io/snowfall/)
-- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/snowfall/tree/demo)
+- [Live Example](https://cahilfoley.github.io/react-snowfall/)
+- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/react-snowfall/tree/demo)
 
@@ -18,3 +20,3 @@ ## Installation
 ```
-npm i @cahil/snowfall
+npm i react-snowfall
 ```
@@ -25,3 +27,3 @@
 ```
-yarn add @cahil/snowfall
+yarn add react-snowfall
 ```
@@ -36,3 +38,3 @@
 import ReactDOM from 'react-dom'
-import Snowfall from '@cahil/snowfall'
+import Snowfall from 'react-snowfall'
 
@@ -39,0 +41,0 @@ ReactDOM.render(

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119974

increased by38.34%

Number of package files

38

increased by58.33%

Lines of code

1651

increased by27.1%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

59

increased by3.51%

No dependency changes