react-snowfall - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0-alpha.1

.eslintrc.js

@@ -0,0 +0,0 @@ module.exports = {

.prettierrc.js

@@ -0,0 +0,0 @@ module.exports = {

CHANGELOG.md

@@ -0,0 +0,0 @@ # Changelog

lib/config.d.ts

 import { CSSProperties } from 'react';
 export declare const snowfallBaseStyle: CSSProperties;
 export declare const targetFrameTime: number;
-export declare const requestAnimationFrame: (callback: FrameRequestCallback) => number;
+export declare const requestAnimationFrame: ((callback: FrameRequestCallback) => number) & typeof globalThis.requestAnimationFrame;

lib/config.js

@@ -14,5 +14,5 @@ "use strict";
   width: '100%',
-  height: '100%' // Target of 60 frames per second
+  height: '100%'
+}; // Target of 60 frames per second
 
-};
 exports.snowfallBaseStyle = snowfallBaseStyle;
@@ -19,0 +19,0 @@ var targetFrameTime = 1000 / 60;

lib/hooks.d.ts

@@ -1,3 +0,3 @@
-import { MutableRefObject, CSSProperties } from 'react';
-import Snowflake from './Snowflake';
+import { DependencyList, EffectCallback, MutableRefObject, CSSProperties } from 'react';
+import Snowflake, { SnowflakeConfig } from './Snowflake';
 /**
@@ -9,3 +9,3 @@ * A utility hook to manage creating and updating a collection of snowflakes
  */
-export declare const useSnowflakes: (canvasRef: MutableRefObject<HTMLCanvasElement | undefined>, amount: number, config: Partial<import("./Snowflake").SnowflakeProps>) => Snowflake[];
+export declare const useSnowflakes: (canvasRef: React.MutableRefObject<HTMLCanvasElement | undefined>, amount: number, config: SnowflakeConfig) => Snowflake[];
 /**
@@ -104,5 +104,5 @@ * Returns the height and width of a HTML element, uses the `ResizeObserver` api if available to detect changes to the
     breakInside?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region" | undefined;
-    captionSide?: "inherit" | "top" | "bottom" | "-moz-initial" | "initial" | "revert" | "unset" | "block-end" | "block-start" | "inline-end" | "inline-start" | undefined;
+    captionSide?: "inherit" | "bottom" | "top" | "-moz-initial" | "initial" | "revert" | "unset" | "block-end" | "block-start" | "inline-end" | "inline-start" | undefined;
     caretColor?: string | undefined;
-    clear?: "left" | "right" | "none" | "both" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined;
+    clear?: "left" | "right" | "both" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inline-end" | "inline-start" | undefined;
     clipPath?: string | undefined;
@@ -126,3 +126,3 @@ color?: string | undefined;
     display?: string | undefined;
-    emptyCells?: "show" | "hide" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
+    emptyCells?: "hide" | "show" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     filter?: string | undefined;
@@ -167,3 +167,3 @@ flexBasis?: string | number | undefined;
     imageOrientation?: string | undefined;
-    imageRendering?: "auto" | "inherit" | "pixelated" | "-moz-initial" | "initial" | "revert" | "unset" | "-moz-crisp-edges" | "-o-crisp-edges" | "-webkit-optimize-contrast" | "crisp-edges" | undefined;
+    imageRendering?: "auto" | "pixelated" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "-moz-crisp-edges" | "-o-crisp-edges" | "-webkit-optimize-contrast" | "crisp-edges" | undefined;
     imageResolution?: string | undefined;
@@ -273,7 +273,7 @@ initialLetter?: string | number | undefined;
     quotes?: string | undefined;
-    resize?: "none" | "both" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "block" | "inline" | "horizontal" | "vertical" | undefined;
+    resize?: "both" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "block" | "inline" | "horizontal" | "vertical" | undefined;
     right?: string | number | undefined;
     rotate?: string | undefined;
     rowGap?: string | number | undefined;
-    rubyAlign?: "start" | "center" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "space-around" | "space-between" | undefined;
+    rubyAlign?: "center" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "space-around" | "space-between" | undefined;
     rubyMerge?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "collapse" | "separate" | undefined;
@@ -315,4 +315,4 @@ rubyPosition?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "inter-character" | "over" | "under" | undefined;
     tableLayout?: "fixed" | "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
-    textAlign?: "left" | "right" | "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | "match-parent" | undefined;
-    textAlignLast?: "auto" | "left" | "right" | "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    textAlign?: "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | "match-parent" | undefined;
+    textAlignLast?: "auto" | "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     textCombineUpright?: string | undefined;
@@ -465,3 +465,3 @@ textDecorationColor?: string | undefined;
     msAlignSelf?: string | undefined;
-    msBlockProgression?: "inherit" | "rl" | "lr" | "-moz-initial" | "initial" | "revert" | "unset" | "bt" | "tb" | undefined;
+    msBlockProgression?: "inherit" | "lr" | "rl" | "-moz-initial" | "initial" | "revert" | "unset" | "bt" | "tb" | undefined;
     msContentZoomChaining?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "chained" | undefined;
@@ -519,3 +519,3 @@ msContentZoomLimitMax?: string | undefined;
     msWordBreak?: "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "break-word" | "break-all" | "keep-all" | undefined;
-    msWrapFlow?: "auto" | "both" | "start" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clear" | "maximum" | undefined;
+    msWrapFlow?: "auto" | "both" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "clear" | "maximum" | undefined;
     msWrapMargin?: string | number | undefined;
@@ -652,3 +652,3 @@ msWrapThrough?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "wrap" | undefined;
     WebkitTransition?: string | undefined;
-    boxAlign?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
+    boxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
     boxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
@@ -660,3 +660,3 @@ boxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     boxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined;
-    boxPack?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    boxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     clip?: string | undefined;
@@ -681,3 +681,3 @@ fontVariantAlternates?: string | undefined;
     textCombineHorizontal?: string | undefined;
-    KhtmlBoxAlign?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
+    KhtmlBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
     KhtmlBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
@@ -689,3 +689,3 @@ KhtmlBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     KhtmlBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined;
-    KhtmlBoxPack?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    KhtmlBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     KhtmlLineBreak?: "auto" | "normal" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "strict" | "loose" | undefined;
@@ -704,3 +704,3 @@ KhtmlOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     MozBorderRadiusTopright?: string | number | undefined;
-    MozBoxAlign?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
+    MozBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
     MozBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
@@ -710,3 +710,3 @@ MozBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     MozBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined;
-    MozBoxPack?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    MozBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     MozBoxShadow?: string | undefined;
@@ -719,3 +719,3 @@ MozOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     MozOutlineWidth?: string | number | undefined;
-    MozTextAlignLast?: "auto" | "left" | "right" | "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    MozTextAlignLast?: "auto" | "left" | "right" | "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     MozTextBlink?: "blink" | "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
@@ -745,3 +745,3 @@ MozTextDecorationColor?: string | undefined;
     OTransitionTimingFunction?: string | undefined;
-    WebkitBoxAlign?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
+    WebkitBoxAlign?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "stretch" | "baseline" | undefined;
     WebkitBoxDirection?: "normal" | "reverse" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
@@ -753,14 +753,14 @@ WebkitBoxFlex?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     WebkitBoxOrient?: "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "horizontal" | "vertical" | "block-axis" | "inline-axis" | undefined;
-    WebkitBoxPack?: "start" | "center" | "end" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
+    WebkitBoxPack?: "center" | "end" | "start" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "justify" | undefined;
     WebkitScrollSnapPointsX?: string | undefined;
     WebkitScrollSnapPointsY?: string | undefined;
-    alignmentBaseline?: "auto" | "inherit" | "hanging" | "middle" | "alphabetic" | "ideographic" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "after-edge" | "before-edge" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | undefined;
+    alignmentBaseline?: "auto" | "inherit" | "alphabetic" | "hanging" | "ideographic" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | "baseline" | "after-edge" | "before-edge" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | undefined;
     baselineShift?: string | number | undefined;
-    clipRule?: "nonzero" | "evenodd" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
+    clipRule?: "evenodd" | "nonzero" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     colorInterpolation?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "linearRGB" | "sRGB" | undefined;
     colorRendering?: "auto" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "optimizeSpeed" | "optimizeQuality" | undefined;
-    dominantBaseline?: "auto" | "inherit" | "hanging" | "middle" | "alphabetic" | "ideographic" | "-moz-initial" | "initial" | "revert" | "unset" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | "no-change" | "reset-size" | "use-script" | undefined;
+    dominantBaseline?: "auto" | "inherit" | "alphabetic" | "hanging" | "ideographic" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | "central" | "mathematical" | "text-after-edge" | "text-before-edge" | "no-change" | "reset-size" | "use-script" | undefined;
     fill?: string | undefined;
     fillOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
-    fillRule?: "nonzero" | "evenodd" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
+    fillRule?: "evenodd" | "nonzero" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     floodColor?: string | undefined;
@@ -785,4 +785,24 @@ floodOpacity?: number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     strokeWidth?: string | number | undefined;
-    textAnchor?: "start" | "end" | "inherit" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
+    textAnchor?: "end" | "start" | "inherit" | "middle" | "-moz-initial" | "initial" | "revert" | "unset" | undefined;
     vectorEffect?: "none" | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | "non-scaling-stroke" | undefined;
 };
+/**
+ * Same as `React.useEffect` but uses a deep comparison on the dependency array. This should only
+ * be used when working with non-primitive dependencies.
+ *
+ * @param effect Effect callback to run
+ * @param deps Effect dependencies
+ */
+export declare function useDeepCompareEffect(effect: EffectCallback, deps: DependencyList): void;
+/**
+ * Utility hook to stabilize a reference to a value, the returned value will always match the input value
+ * but (unlike an inline object) will maintain [SameValueZero](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+ * equality until a change is made.
+ *
+ * @example
+ *
+ * const obj = useDeepMemo({ foo: 'bar', bar: 'baz' }) // <- inline object creation
+ * const prevValue = usePrevious(obj) // <- value from the previous render
+ * console.log(obj === prevValue) // <- always logs true until value changes
+ */
+export declare function useDeepMemo<T>(value: T): T;

lib/hooks.js

@@ -6,2 +6,4 @@ "use strict";
 });
+exports.useDeepCompareEffect = useDeepCompareEffect;
+exports.useDeepMemo = useDeepMemo;
 exports.useSnowfallStyle = exports.useComponentSize = exports.useSnowflakes = void 0;
@@ -11,2 +13,4 @@
 
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 var _Snowflake = _interopRequireDefault(require("./Snowflake"));
@@ -20,20 +24,26 @@
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
@@ -148,8 +158,50 @@
   var styles = (0, _react.useMemo)(function () {
-    return _objectSpread({}, _config.snowfallBaseStyle, overrides || {});
+    return _objectSpread(_objectSpread({}, _config.snowfallBaseStyle), overrides || {});
   }, [overrides]);
   return styles;
 };
+/**
+ * Same as `React.useEffect` but uses a deep comparison on the dependency array. This should only
+ * be used when working with non-primitive dependencies.
+ *
+ * @param effect Effect callback to run
+ * @param deps Effect dependencies
+ */
 
+
 exports.useSnowfallStyle = useSnowfallStyle;
+
+function useDeepCompareEffect(effect, deps) {
+  var ref = (0, _react.useRef)(deps); // Only update the current dependencies if they are not deep equal
+
+  if (!(0, _reactFastCompare["default"])(deps, ref.current)) {
+    ref.current = deps;
+  }
+
+  (0, _react.useEffect)(effect, ref.current);
+}
+/**
+ * Utility hook to stabilize a reference to a value, the returned value will always match the input value
+ * but (unlike an inline object) will maintain [SameValueZero](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+ * equality until a change is made.
+ *
+ * @example
+ *
+ * const obj = useDeepMemo({ foo: 'bar', bar: 'baz' }) // <- inline object creation
+ * const prevValue = usePrevious(obj) // <- value from the previous render
+ * console.log(obj === prevValue) // <- always logs true until value changes
+ */
+
+
+function useDeepMemo(value) {
+  var _useState5 = (0, _react.useState)(value),
+      _useState6 = _slicedToArray(_useState5, 2),
+      state = _useState6[0],
+      setState = _useState6[1];
+
+  useDeepCompareEffect(function () {
+    return setState(value);
+  }, [value]);
+  return state;
+}
 //# sourceMappingURL=hooks.js.map

lib/index.d.ts

@@ -0,0 +0,0 @@ export * from './hooks';

lib/index.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -19,2 +21,3 @@ value: true
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
@@ -33,2 +36,3 @@ enumerable: true,
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
   Object.defineProperty(exports, key, {
@@ -47,2 +51,3 @@ enumerable: true,
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Snowflake[key]) return;
   Object.defineProperty(exports, key, {
@@ -61,2 +66,3 @@ enumerable: true,
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Snowfall[key]) return;
   Object.defineProperty(exports, key, {
@@ -70,3 +76,5 @@ enumerable: true,
 
-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 _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

lib/Snowfall.d.ts

 import React from 'react';
-export interface SnowfallProps {
-    color?: string;
+import { SnowflakeProps } from './Snowflake';
+export interface SnowfallProps extends Partial<SnowflakeProps> {
+    /**
+     * The number of snowflakes to be rendered.
+     *
+     * The default value is 150.
+     */
     snowflakeCount?: number;
+    /**
+     * Any style properties that will be passed to the canvas element.
+     */
     style?: React.CSSProperties;
 }
-declare const Snowfall: ({ color, snowflakeCount, style }?: SnowfallProps) => JSX.Element;
+declare const Snowfall: ({ color, changeFrequency, radius, speed, wind, snowflakeCount, style, }?: SnowfallProps) => JSX.Element;
 export default Snowfall;

lib/Snowfall.js

 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
@@ -14,8 +16,20 @@ value: true
 
-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; } }
+var _Snowflake = require("./Snowflake");
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Snowfall = function Snowfall() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#dee4fd' : _ref$color,
+      color = _ref$color === void 0 ? _Snowflake.defaultConfig.color : _ref$color,
+      _ref$changeFrequency = _ref.changeFrequency,
+      changeFrequency = _ref$changeFrequency === void 0 ? _Snowflake.defaultConfig.changeFrequency : _ref$changeFrequency,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? _Snowflake.defaultConfig.radius : _ref$radius,
+      _ref$speed = _ref.speed,
+      speed = _ref$speed === void 0 ? _Snowflake.defaultConfig.speed : _ref$speed,
+      _ref$wind = _ref.wind,
+      wind = _ref$wind === void 0 ? _Snowflake.defaultConfig.wind : _ref$wind,
       _ref$snowflakeCount = _ref.snowflakeCount,
@@ -30,7 +44,9 @@ snowflakeCount = _ref$snowflakeCount === void 0 ? 150 : _ref$snowflakeCount,
   var lastUpdate = (0, _react.useRef)(Date.now());
-  var config = (0, _react.useMemo)(function () {
-    return {
-      color: color
-    };
-  }, [color]);
+  var config = (0, _hooks.useDeepMemo)({
+    color: color,
+    changeFrequency: changeFrequency,
+    radius: radius,
+    speed: speed,
+    wind: wind
+  });
   var snowflakes = (0, _hooks.useSnowflakes)(canvasRef, snowflakeCount, config);
@@ -78,3 +94,3 @@
   }, [loop]);
-  return _react["default"].createElement("canvas", {
+  return /*#__PURE__*/_react["default"].createElement("canvas", {
     ref: updateCanvasRef,
@@ -81,0 +97,0 @@ height: canvasSize.height,

lib/Snowflake.d.ts

 export interface SnowflakeProps {
+    /** The color of the snowflake, can be any valid CSS color. */
     color: string;
-    radius: [number, number];
-    speed: [number, number];
-    wind: [number, number];
+    /**
+     * The minimum and maximum radius of the snowflake, will be
+     * randomly selected within this range.
+     *
+     * The default value is `[0.5, 3.0]`.
+     */
+    radius: [minimumRadius: number, maximumRadius: number];
+    /**
+     * The minimum and maximum speed of the snowflake.
+     *
+     * The speed determines how quickly the snowflake moves
+     * along the y axis (vertical speed).
+     *
+     * The values will be randomly selected within this range.
+     *
+     * The default value is `[1.0, 3.0]`.
+     */
+    speed: [minimumSpeed: number, maximumSpeed: number];
+    /**
+     * The minimum and maximum wind of the snowflake.
+     *
+     * The wind determines how quickly the snowflake moves
+     * along the x axis (horizontal speed).
+     *
+     * The values will be randomly selected within this range.
+     *
+     * The default value is `[-0.5, 2.0]`.
+     */
+    wind: [minimumWind: number, maximumWind: number];
+    /**
+     * The frequency in frames that the wind and speed values
+     * will update.
+     *
+     * The default value is 200.
+     */
     changeFrequency: number;
 }
 export declare type SnowflakeConfig = Partial<SnowflakeProps>;
+export declare const defaultConfig: SnowflakeProps;
 /** An individual snowflake that will update it's location every call to `draw` */
@@ -15,3 +49,3 @@ declare class Snowflake {
     constructor(canvas: HTMLCanvasElement, config?: SnowflakeConfig);
-    private readonly fullConfig;
+    private get fullConfig();
     draw: (canvas: HTMLCanvasElement, inputCtx?: CanvasRenderingContext2D | undefined) => void;
@@ -18,0 +52,0 @@ private translate;

lib/Snowflake.js

@@ -6,16 +6,22 @@ "use strict";
 });
-exports["default"] = void 0;
+exports["default"] = exports.defaultConfig = void 0;
 
 var _utils = require("./utils");
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
-function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -32,11 +38,10 @@
   radius: [0.5, 3.0],
-  speed: [1, 3],
-  wind: [-0.5, 2],
+  speed: [1.0, 3.0],
+  wind: [-0.5, 2.0],
   changeFrequency: 200
 };
+exports.defaultConfig = defaultConfig;
 
 /** An individual snowflake that will update it's location every call to `draw` */
-var Snowflake =
-/*#__PURE__*/
-function () {
+var Snowflake = /*#__PURE__*/function () {
   function Snowflake(_canvas) {
@@ -121,3 +126,3 @@ var _this = this;
     get: function get() {
-      return _objectSpread({}, defaultConfig, this.config);
+      return _objectSpread(_objectSpread({}, defaultConfig), this.config);
     }
@@ -124,0 +129,0 @@ }]);

lib/utils.d.ts

@@ -0,0 +0,0 @@ /**

lib/utils.js

@@ -0,0 +0,0 @@ "use strict";

package.json

 {
   "name": "react-snowfall",
-  "version": "1.0.2",
+  "version": "1.1.0-alpha.1",
   "description": "A react component that creates a snowfall effect",
@@ -37,24 +37,27 @@ "main": "./lib/Snowfall.js",
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.1",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
+    "@babel/preset-env": "^7.13.5",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
-    "@typescript-eslint/eslint-plugin": "^1.9.0",
-    "@typescript-eslint/parser": "^1.9.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
-    "prettier": "^1.18.2",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
+    "eslint": "^7.20.0",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.2.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "standard-version": "^6.0.1",
-    "typescript": "^3.5.1"
+    "standard-version": "^9.1.1",
+    "typescript": "^4.1.5"
+  },
+  "dependencies": {
+    "react-fast-compare": "^3.2.0"
   }
-}
+}

README.md

@@ -11,4 +11,4 @@ ![Snowfall Demo](./assets/snowfall-demo-banner.gif)
 
-- [Live Example](https://cahilfoley.github.io/react-snowfall/)
-- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/react-snowfall/tree/demo)
+- [Live Example](https://cahilfoley.github.io/react-snowfall)
+- [Demo Playground](https://codesandbox.io/s/github/cahilfoley/react-snowfall/tree/master/demo)
 
@@ -31,3 +31,3 @@ ## Installation
 
-Basic usage requires no properties and will take match the size of the parent element.
+Basic usage requires no properties - it will grow to fill the parent element.
 
@@ -34,0 +34,0 @@ ```jsx

tsconfig.json

@@ -17,5 +17,10 @@ {
     "esModuleInterop": true,
-    "lib": ["dom", "es2015"]
+    "lib": [
+      "dom",
+      "es2015"
+    ]
   },
-  "include": ["src"]
-}
+  "include": [
+    "src"
+  ]
+}

New 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

125250

increased by4.31%

Worsened metrics

Dependency count

3

increased by50%

Number of package files

29

decreased by-23.68%

Lines of code

1487

decreased by-9.93%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-fast-compare@^3.2.0

• + Addedreact-fast-compare@3.2.2(transitive)