feat(useRect): allow passing deps argument to useRect and useRectEffe…

…ct to force updates Closes #18
garthenweb · Feb 16, 2020 · 8325ce6 · 8325ce6
1 parent 4149dcc
commit 8325ce6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/docs/api/useRect.md b/docs/api/useRect.md
@@ -18,6 +18,7 @@ In case you need full control over the element, I recommend using the [ResizeObs
 | options.disableDimensionsUpdates | boolean |  | Disables updates to dimensions events (only for `useViewport`) |
 | options.deferUpdateUntilIdle | boolean |  | Defers to trigger updates until the collector is idle. See [Defer Events](../concepts/defer_events.md) |
 | options.priority | `'low'`, `'normal'`, `'high'`, `'highest'` |  | Allows to set a priority of the update. See [Defer Events](../concepts/scheduler.md) |
+| deps | array |  | Array with dependencies. In case a value inside the array changes, this will force an update on the rect |
 
 ### Example
 
@@ -56,6 +57,7 @@ Same as the `useRect` hook but as an effect, therefore it does not return anythi
 | options.disableDimensionsUpdates | boolean |  | Disables updates to dimensions events (only for `useViewport`) |
 | options.deferUpdateUntilIdle | boolean |  | Defers to trigger updates until the collector is idle. See [Defer Events](../concepts/defer_events.md) |
 | options.priority | `'low'`, `'normal'`, `'high'`, `'highest'` |  | Allows to set a priority of the update. See [Defer Events](../concepts/scheduler.md) |
+| deps | array |  | Array with dependencies. In case a value inside the array changes, this will force an update to the effect function |
 
 ### Example
 

diff --git a/lib/hooks.ts b/lib/hooks.ts
@@ -153,32 +153,60 @@ export const useDimensions = (options: IOptions = {}): IDimensions => {
   return dimensions;
 };
 
-export const useRectEffect = (
+export function useRectEffect(
   effect: (rect: IRect | null) => void,
   ref: RefObject<HTMLElement>,
-  options?: IFullOptions,
-) => {
+  deps?: DependencyList,
+): void;
+
+export function useRectEffect(
+  effect: (rect: IRect | null) => void,
+  ref: RefObject<HTMLElement>,
+  options: IFullOptions,
+  deps?: DependencyList,
+): void;
+
+export function useRectEffect(
+  effect: (rect: IRect | null) => void,
+  ref: RefObject<HTMLElement>,
+  third?: any,
+  fourth?: any,
+) {
+  const { options, deps } = sortArgs(third, fourth);
   useViewportEffect(
     (_, snapshot) => effect(snapshot),
     {
       ...options,
       recalculateLayoutBeforeUpdate: () =>
         ref.current ? ref.current.getBoundingClientRect() : null,
     },
-    [ref.current],
+    [ref.current, ...deps],
   );
-};
+}
 
-export const useRect = (
+export function useRect(
   ref: RefObject<HTMLElement>,
-  options?: IFullOptions,
-): IRect | null => {
+  deps?: DependencyList,
+): void;
+
+export function useRect(
+  ref: RefObject<HTMLElement>,
+  options: IFullOptions,
+  deps?: DependencyList,
+): void;
+
+export function useRect(
+  ref: RefObject<HTMLElement>,
+  second: any,
+  third?: any,
+): IRect | null {
+  const { options, deps } = sortArgs(second, third);
   return useLayoutSnapshot(
     () => (ref.current ? ref.current.getBoundingClientRect() : null),
     options,
-    [ref.current],
+    [ref.current, ...deps],
   );
-};
+}
 
 export function useLayoutSnapshot<T = unknown>(
   recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,