Merge pull request #5 from envato/observe-hook-rules

Ensure hooks are always called in the same order

Author: mdingena

README.md

@@ -5,6 +5,7 @@
 <h1 align="center">React Breakpoints</h1>
 
 <p align="center">
+  <img alt="dependent repositories" src="https://img.shields.io/librariesio/dependent-repos/npm/@envato/react-breakpoints?label=Used%20by&style=for-the-badge" />
   <img alt="npm version" src="https://img.shields.io/npm/v/@envato/react-breakpoints?style=for-the-badge" />
   <img alt="react version" src="https://img.shields.io/npm/dependency-version/@envato/react-breakpoints/dev/react?style=for-the-badge">
   <img alt="license" src="https://img.shields.io/npm/l/@envato/react-breakpoints?style=for-the-badge" />

docs/api.md

@@ -490,12 +490,17 @@ const MyObservedComponent = () => {
 
 # `useResizeObserverEntry()`
 
-⚠️ **Advanced usage** — This hook is used internally in [`useBreakpoints()`](#usebreakpoints) to retrieve the `ResizeObserverEntry` instance set by [`<Observe>`](#observe). It allows you to manually extract [its properties](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry), most notably `.borderBoxSize`, `.contentBoxSize`, and `.devicePixelContentBoxSize`. This hook takes no arguments.
+⚠️ **Advanced usage** — This hook is used internally in [`useBreakpoints()`](#usebreakpoints) to retrieve the `ResizeObserverEntry` instance set by [`<Observe>`](#observe). It allows you to manually extract [its properties](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry), most notably `.borderBoxSize`, `.contentBoxSize`, and `.devicePixelContentBoxSize`.
+
+The hook takes an optional `ResizeObserverEntry` as its second argument. **If you pass one, `useResizeObserverEntry()` will not fetch it from the [context](#context), so use caution!**
 
 ## Reference guide
 
 ```javascript
-const resizeObserverEntry = useResizeObserverEntry();
+const resizeObserverEntry = useResizeObserverEntry(
+  /* (optional) a ResizeObserverEntry to use instead of the one provided on context */
+  injectResizeObserverEntry
+);
 const fragmentIndex = 0;
 
 /* retrieve width and height from legacy `contentRect` property */

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@envato/react-breakpoints",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer \"web design's unicorn\" 🦄",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -6,25 +6,19 @@ import { useBreakpoints } from './useBreakpoints';
 const Observe = ({
   render,
   box = undefined,
-  breakpoints = undefined
+  breakpoints = {}
 }) => {
   const observeOptions = box ? { box } : {};
 
   const [ref, observedEntry] = useResizeObserver(observeOptions);
+  const [widthMatch, heightMatch] = useBreakpoints(breakpoints, observedEntry);
 
   const renderOptions = {
     observedElementProps: { ref },
-    widthMatch: undefined,
-    heightMatch: undefined
+    widthMatch,
+    heightMatch
   };
 
-  if (breakpoints) {
-    const [widthMatch, heightMatch] = useBreakpoints(breakpoints, observedEntry);
-
-    renderOptions.widthMatch = widthMatch;
-    renderOptions.heightMatch = heightMatch;
-  }
-
   return (
     <Context.Provider value={observedEntry}>
       {render(renderOptions)}

src/Observe.js

@@ -41,7 +41,7 @@ const useBreakpoints = ({
   box = undefined,
   fragment = 0 // https://github.com/w3c/csswg-drafts/pull/4529
 }, injectResizeObserverEntry = undefined) => {
-  const resizeObserverEntry = injectResizeObserverEntry || useResizeObserverEntry();
+  const resizeObserverEntry = useResizeObserverEntry(injectResizeObserverEntry);
 
   const [width, setWidth] = useState(undefined);
   const [height, setHeight] = useState(undefined);

src/useBreakpoints.js

@@ -3,12 +3,13 @@ import { Context } from './Context';
 
 /**
  * Returns the ResizeObserverEntry from nearest Context.
+ * @argument {ResizeObserverEntry} [injectResizeObserverEntry] - Explicitly set the ResizeObserverEntry to use instead of fetching it from Context.
  * @returns {(ResizeObserverEntry|null)}
  */
-const useResizeObserverEntry = () => {
+const useResizeObserverEntry = injectResizeObserverEntry => {
   const resizeObserverEntry = useContext(Context);
 
-  return resizeObserverEntry;
+  return injectResizeObserverEntry || resizeObserverEntry;
 };
 
 export { useResizeObserverEntry };