@brightleaf/react-hooks - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/use-click-outside.js

@@ -11,9 +11,9 @@ "use strict";
 const useClickOutside = (ref, handler = e => {}, when = true) => {
-  const handle = e => {
-    if (ref && ref.current && !ref.current.contains(e.target)) {
-      handler(e);
-    }
-  };
+  (0, _react.useLayoutEffect)(() => {
+    const handle = e => {
+      if (ref && ref.current && !ref.current.contains(e.target)) {
+        handler(e);
+      }
+    };
 
-  (0, _react.useLayoutEffect)(() => {
     if (when) {
@@ -20,0 +20,0 @@ document.addEventListener('click', handle);

lib/use-fetch.js

@@ -18,4 +18,3 @@ "use strict";
   });
-
-  const fetchQuery = async url => {
+  const fetchQuery = (0, _react.useCallback)(async url => {
     dispatch({
@@ -32,7 +31,6 @@ type: 'get'
     });
-  };
-
+  }, [options]);
   (0, _react.useEffect)(() => {
     fetchQuery(url);
-  }, [url]);
+  }, [fetchQuery, url]);
   return state;
@@ -39,0 +37,0 @@ };

lib/use-local-storage.js

@@ -10,2 +10,10 @@ "use strict";
 
+/**
+ * useLocalStorage - Hook to use local storage
+ *
+ * @param {string} key - The key to save the item in local storage
+ * @param {*} initialValue - The initial value
+ * @param {boolean} [raw=false] - if the object should be JSON.parsed or not
+ * @returns {Array.<{value: object , setFunction: function}>} The value and the setter function
+ */
 const useLocalStorage = (key, initialValue, raw = false) => {
@@ -12,0 +20,0 @@ const [state, setState] = (0, _react.useState)(() => {

lib/use-nes.js

@@ -54,3 +54,3 @@ "use strict";
 
-const useNes = (url = 'ws://localhost:4567') => {
+const useNes = (url = 'ws://localhost:4567', subscribe = true) => {
   const [state, dispatch] = (0, _react.useReducer)(reducer, {
@@ -95,9 +95,32 @@ message: [],
         };
+
+        if (subscribe) {
+          client.subscribe(url, update => {
+            dispatch({
+              type: 'message',
+              payload: {
+                data: update
+              }
+            });
+            return resolve();
+          });
+        }
       });
     };
 
-    connectClient();
+    connectClient(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
+  const dispatcher = message => {
+    dispatch({
+      type: 'message',
+      payload: {
+        data: message
+      }
+    });
+  };
+
   return { ...state,
-    client
+    client,
+    dispatcher
   };
@@ -104,0 +127,0 @@ };

lib/use-websockets.js

@@ -55,4 +55,3 @@ "use strict";
   const websocket = new WebSocket(url);
-
-  const connectClient = async () => {
+  const connectClient = (0, _react.useCallback)(() => {
     dispatch({
@@ -87,7 +86,6 @@ type: 'get'
     });
-  };
-
+  }, [websocket.onclose, websocket.onmessage, websocket.onopen]);
   (0, _react.useEffect)(() => {
     connectClient();
-  }, []);
+  }, [connectClient]);
   return { ...state
@@ -94,0 +92,0 @@ };

package.json

 {
   "name": "@brightleaf/react-hooks",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Useful react hooks",
@@ -44,2 +44,3 @@ "files": [
     "eslint": "^5.16.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "hash-source": "^1.0.4",
@@ -49,2 +50,5 @@ "html-webpack-plugin": "^3.2.0",
     "jest": "^24.8.0",
+    "jest-localstorage-mock": "^2.4.0",
+    "jest-websocket-mock": "^1.4.0",
+    "mock-socket": "^8.0.5",
     "react": "^16.8.6",
@@ -54,2 +58,3 @@ "react-dom": "^16.8.6",
     "react-hot-loader": "^4.8.4",
+    "react-test-renderer": "^16.8.6",
     "react-testing-library": "^6.1.2",
@@ -63,3 +68,8 @@ "style-loader": "^0.23.1",
     "react": ">= 16.8.6"
+  },
+  "jest": {
+    "setupFiles": [
+      "jest-localstorage-mock"
+    ]
   }
 }

readme.md

@@ -13,2 +13,3 @@ # Brightleaf React Hooks
 * `useLocalStorage` - Hook to local storage
+* `useHover` - Hook for binding to hover of an element
 
@@ -247,2 +248,22 @@ ## GraphQL Hook
 }
+```
+
+## Hover Hook
+
+```javascript
+import React, { useRef } from 'react'
+import { useHover } from '@brightleaf/react-hooks'
+
+export default () => {
+  const elRef = useRef(null);
+  const hovered = useHover(elRef);
+
+  return (
+    <div>
+      <div className={ hovered ? 'animated' : 'static' }>
+        Hover Over Me
+      </button>
+    </div>
+  );
+}
 ```

No alert changes

Improved metrics

Total package byte prevSize

26484

increased by23.46%

Number of package files

18

increased by28.57%

Lines of code

734

increased by24.41%

Number of lines in readme file

267

increased by8.54%

Worsened metrics

Dev dependency count

32

increased by18.52%

No dependency changes