@dwarvesf/react-hooks - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

CHANGELOG.md

 # @dwarvesf/react-hooks
 
+## 0.2.0
+
+### Minor Changes
+
+- [`b099946`](https://github.com/dwarvesf/react-sdk/commit/b0999461c07ec8464decec950f82e4adbf98e0fe)
+  Thanks [@zlatanpham](https://github.com/zlatanpham)! - Add `useConstant`.
+
+* [`a0ea98f`](https://github.com/dwarvesf/react-sdk/commit/a0ea98f05aea66f9254583ede2f4239c9d7e2aa5)
+  Thanks [@zlatanpham](https://github.com/zlatanpham)! - Add `useDebounce`.
+
+- [`99b35a4`](https://github.com/dwarvesf/react-sdk/commit/99b35a426961d337b8fd9647176bea61470883a6)
+  Thanks [@zlatanpham](https://github.com/zlatanpham)! - Add `useMergeRefs`.
+
+* [`f570ce1`](https://github.com/dwarvesf/react-sdk/commit/f570ce1f60ed371e7f547dbbc19ca92dae36d1cb)
+  Thanks [@zlatanpham](https://github.com/zlatanpham)! - Add
+  `useWhyDidYouUpdate`.
+
+### Patch Changes
+
+- [`a0e6a68`](https://github.com/dwarvesf/react-sdk/commit/a0e6a683ba51eeb90a4c7a408daef91623642e93)
+  Thanks [@zlatanpham](https://github.com/zlatanpham)! - Add
+  `useLockBodyScroll`.
+
+- Updated dependencies
+  [[`d7f7e13`](https://github.com/dwarvesf/react-sdk/commit/d7f7e13c4b472d7c8b62fc02553f7301bbda251f)]:
+  - @dwarvesf/react-utils@0.1.0
+
 ## 0.1.0
@@ -4,0 +31,0 @@

dist/_virtual/_rollupPluginBabelHelpers.js

@@ -0,1 +1,19 @@
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -16,3 +34,3 @@ if (source == null) return {};
 
-export { _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose };
+export { _extends as extends, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose };
 //# sourceMappingURL=_rollupPluginBabelHelpers.js.map

dist/index.d.ts

@@ -5,1 +5,6 @@ export { default as useDisclosure } from "./useDisclosure";
 export { default as useClipboard } from "./useClipboard";
+export { default as useLockBodyScroll } from "./useLockBodyScroll";
+export { default as useDebounce } from "./useDebounce";
+export { default as useWhyDidYouUpdate } from "./useWhyDidYouUpdate";
+export { default as useConstant } from "./useConstant";
+export { default as useMergeRefs } from "./useMergeRefs";

dist/index.esm.js

@@ -5,2 +5,7 @@ export { default as usePrevious } from './usePrevious.esm.js';
 export { default as useClipboard } from './useClipboard.esm.js';
+export { default as useLockBodyScroll } from './useLockBodyScroll.esm.js';
+export { default as useDebounce } from './useDebounce.esm.js';
+export { default as useWhyDidYouUpdate } from './useWhyDidYouUpdate.esm.js';
+export { default as useConstant } from './useConstant.esm.js';
+export { default as useMergeRefs } from './useMergeRefs.esm.js';
 //# sourceMappingURL=index.esm.js.map

dist/react-hooks.cjs.development.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var copy = _interopDefault(require('copy-to-clipboard'));
@@ -18,4 +18,4 @@
 function usePrevious(value) {
-  var valueRef = react.useRef();
-  react.useEffect(function () {
+  var valueRef = React.useRef();
+  React.useEffect(function () {
     valueRef.current = value;
@@ -35,3 +35,3 @@ }, [value]);
 
-  var _useState = react.useState(props.defaultIsOpen || false),
+  var _useState = React.useState(props.defaultIsOpen || false),
       isOpen = _useState[0],
@@ -41,3 +41,3 @@ setIsOpen = _useState[1];
   var prevIsOpen = usePrevious(isOpen);
-  var onClose = react.useCallback(function () {
+  var onClose = React.useCallback(function () {
     setIsOpen(false);
@@ -49,3 +49,3 @@
   }, [onCloseProp]);
-  var onOpen = react.useCallback(function () {
+  var onOpen = React.useCallback(function () {
     setIsOpen(true);
@@ -57,3 +57,3 @@
   }, [onOpenProp]);
-  var onToggle = react.useCallback(function () {
+  var onToggle = React.useCallback(function () {
     var action = isOpen ? onClose : onOpen;
@@ -76,7 +76,7 @@ action();
 function useForceUpdate() {
-  var _useState = react.useState(0),
+  var _useState = React.useState(0),
       count = _useState[0],
       setCount = _useState[1];
 
-  var forceUpdate = react.useCallback(function () {
+  var forceUpdate = React.useCallback(function () {
     return setCount(count + 1);
@@ -87,2 +87,20 @@ }, [count]);
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -119,3 +137,3 @@ if (source == null) return {};
 
-  var _useState = react.useState(false),
+  var _useState = React.useState(false),
       hasCopied = _useState[0],
@@ -131,7 +149,7 @@ setHasCopied = _useState[1];
 
-  var onCopy = react.useCallback(function () {
+  var onCopy = React.useCallback(function () {
     var didCopy = copy(text, copyOptions);
     setHasCopied(didCopy);
   }, [text, copyOptions]);
-  react.useEffect(function () {
+  React.useEffect(function () {
     var timeoutId = null;
@@ -158,6 +176,145 @@
 
+function useLockBodyScroll() {
+  // useLaoutEffect callback return type is "() => void" type
+  React.useLayoutEffect(function () {
+    // Get original body overflow
+    var originalStyle = window.getComputedStyle(document.body).overflow; // Prevent scrolling on mount
+
+    document.body.style.overflow = "hidden"; // Re-enable scrolling when component unmounts
+
+    return function () {
+      document.body.style.overflow = originalStyle;
+    };
+  }, []); // Empty array ensures effect is only run on mount and unmount
+}
+
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  var _useState = React.useState(value),
+      debouncedValue = _useState[0],
+      setDebouncedValue = _useState[1];
+
+  React.useEffect(function () {
+    // Update debounced value after delay
+    var handler = setTimeout(function () {
+      setDebouncedValue(value);
+    }, delay); // Cancel the timeout if value changes (also on delay change or unmount)
+    // This is how we prevent debounced value from updating if value is changed ...
+    // .. within the delay period. Timeout gets cleared and restarted.
+
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  var previousProps = React.useRef({});
+  React.useEffect(function () {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      var allKeys = Object.keys(_extends({}, previousProps.current, props)); // Use this object to keep track of changed props
+
+      var changesObj = {}; // Iterate through keys
+
+      allKeys.forEach(function (key) {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key]
+          };
+        }
+      }); // If changesObj not empty then output to console
+
+      if (Object.keys(changesObj).length) {
+        console.log("[why-did-you-update]", name, changesObj);
+      }
+    } // Finally update previousProps with current props for next hook call
+
+
+    previousProps.current = props;
+  });
+}
+
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+
+function useConst(init) {
+  var ref = React.useRef(null);
+
+  if (ref.current === null) {
+    ref.current = typeof init === "function" ? init() : init;
+  }
+
+  return ref.current;
+}
+
+/* eslint-disable react-hooks/exhaustive-deps */
+function assignRef(ref, value) {
+  if (ref == null) return;
+
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+
+  try {
+    // @ts-ignore
+    ref.current = value;
+  } catch (error) {
+    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
+  }
+}
+/**
+ * React hook that merges react refs into a single memoized function
+ *
+ * @example
+ * import React from "react";
+ * import { useMergeRefs } from `@chakra-ui/hooks`;
+ *
+ * const Component = React.forwardRef((props, ref) => {
+ *   const internalRef = React.useRef();
+ *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
+ * });
+ */
+
+function useMergeRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return React.useMemo(function () {
+    if (refs.every(function (ref) {
+      return ref == null;
+    })) {
+      return null;
+    }
+
+    return function (node) {
+      refs.forEach(function (ref) {
+        if (ref) assignRef(ref, node);
+      });
+    };
+  }, refs);
+}
+
 exports.useClipboard = useClipboard;
+exports.useConstant = useConst;
+exports.useDebounce = useDebounce;
 exports.useDisclosure = useDisclosure;
 exports.useForceUpdate = useForceUpdate;
+exports.useLockBodyScroll = useLockBodyScroll;
+exports.useMergeRefs = useMergeRefs;
 exports.usePrevious = usePrevious;
+exports.useWhyDidYouUpdate = useWhyDidYouUpdate;
 //# sourceMappingURL=react-hooks.cjs.development.js.map

dist/react-hooks.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=require("copy-to-clipboard"))&&"object"==typeof e&&"default"in e?e.default:e;function u(e){var n=t.useRef();return t.useEffect((function(){n.current=e}),[e]),n.current}var o=["timeout"];exports.useClipboard=function(e,u){void 0===u&&(u={});var r=t.useState(!1),i=r[0],s=r[1],a="number"==typeof u?{timeout:u}:u,c=a.timeout,f=void 0===c?1500:c,l=function(e,t){if(null==e)return{};var n,u,o={},r=Object.keys(e);for(u=0;u<r.length;u++)t.indexOf(n=r[u])>=0||(o[n]=e[n]);return o}(a,o),p=t.useCallback((function(){var t=n(e,l);s(t)}),[e,l]);return t.useEffect((function(){var e=null;return i&&(e=window.setTimeout((function(){s(!1)}),f)),function(){e&&window.clearTimeout(e)}}),[f,i]),{value:e,onCopy:p,hasCopied:i}},exports.useDisclosure=function(e){void 0===e&&(e={});var n=e.onClose,o=e.onOpen,r=t.useState(e.defaultIsOpen||!1),i=r[0],s=r[1],a=u(i),c=t.useCallback((function(){s(!1),n&&n()}),[n]),f=t.useCallback((function(){s(!0),o&&o()}),[o]),l=t.useCallback((function(){(i?c:f)()}),[i,f,c]);return{isOpen:!!i,prevIsOpen:!!a,onOpen:f,onClose:c,onToggle:l}},exports.useForceUpdate=function(){var e=t.useState(0),n=e[0],u=e[1];return t.useCallback((function(){return u(n+1)}),[n])},exports.usePrevious=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=require("copy-to-clipboard"))&&"object"==typeof e&&"default"in e?e.default:e;function r(e){var n=t.useRef();return t.useEffect((function(){n.current=e}),[e]),n.current}function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var o=["timeout"];function c(e,t){if(null!=e)if("function"!=typeof e)try{e.current=t}catch(n){throw new Error("Cannot assign value '"+t+"' to ref '"+e+"'")}else e(t)}exports.useClipboard=function(e,r){void 0===r&&(r={});var u=t.useState(!1),c=u[0],f=u[1],i="number"==typeof r?{timeout:r}:r,s=i.timeout,a=void 0===s?1500:s,l=function(e,t){if(null==e)return{};var n,r,u={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(u[n]=e[n]);return u}(i,o),p=t.useCallback((function(){var t=n(e,l);f(t)}),[e,l]);return t.useEffect((function(){var e=null;return c&&(e=window.setTimeout((function(){f(!1)}),a)),function(){e&&window.clearTimeout(e)}}),[a,c]),{value:e,onCopy:p,hasCopied:c}},exports.useConstant=function(e){var n=t.useRef(null);return null===n.current&&(n.current="function"==typeof e?e():e),n.current},exports.useDebounce=function(e,n){var r=t.useState(e),u=r[0],o=r[1];return t.useEffect((function(){var t=setTimeout((function(){o(e)}),n);return function(){clearTimeout(t)}}),[e,n]),u},exports.useDisclosure=function(e){void 0===e&&(e={});var n=e.onClose,u=e.onOpen,o=t.useState(e.defaultIsOpen||!1),c=o[0],f=o[1],i=r(c),s=t.useCallback((function(){f(!1),n&&n()}),[n]),a=t.useCallback((function(){f(!0),u&&u()}),[u]),l=t.useCallback((function(){(c?s:a)()}),[c,a,s]);return{isOpen:!!c,prevIsOpen:!!i,onOpen:a,onClose:s,onToggle:l}},exports.useForceUpdate=function(){var e=t.useState(0),n=e[0],r=e[1];return t.useCallback((function(){return r(n+1)}),[n])},exports.useLockBodyScroll=function(){t.useLayoutEffect((function(){var e=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",function(){document.body.style.overflow=e}}),[])},exports.useMergeRefs=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){t&&c(t,e)}))}}),n)},exports.usePrevious=r,exports.useWhyDidYouUpdate=function(e,n){var r=t.useRef({});t.useEffect((function(){if(r.current){var t=Object.keys(u({},r.current,n)),o={};t.forEach((function(e){r.current[e]!==n[e]&&(o[e]={from:r.current[e],to:n[e]})})),Object.keys(o).length&&console.log("[why-did-you-update]",e,o)}r.current=n}))};
 //# sourceMappingURL=react-hooks.cjs.production.min.js.map

package.json

 {
   "name": "@dwarvesf/react-hooks",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Official React hooks for @dwarvesf",
@@ -30,3 +30,3 @@ "author": "Dwarves Foundation",
   "dependencies": {
-    "@dwarvesf/react-utils": "^0.0.2",
+    "@dwarvesf/react-utils": "^0.1.0",
     "copy-to-clipboard": "^3.3.1",
@@ -33,0 +33,0 @@ "tslib": "^2.3.0"

No alert changes

Improved metrics

Total package byte prevSize

66226

114.46%

Number of package files

40

60%

Lines of code

647

96.66%

Dependency changes

• + Added

  @dwarvesf/react-utils@0.1.0
  (transitive)

• - Removed

  @dwarvesf/react-utils@0.0.2
  (transitive)

• Updated

  @dwarvesf/react-utils@^0.1.0