diff --git a/docs/api/useRect.md b/docs/api/useRect.md index 701d16c..9645d79 100644 --- 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 index 3789894..0794fac 100644 --- a/lib/hooks.ts +++ b/lib/hooks.ts @@ -153,11 +153,26 @@ export const useDimensions = (options: IOptions = {}): IDimensions => { return dimensions; }; -export const useRectEffect = ( +export function useRectEffect( effect: (rect: IRect | null) => void, ref: RefObject, - options?: IFullOptions, -) => { + deps?: DependencyList, +): void; + +export function useRectEffect( + effect: (rect: IRect | null) => void, + ref: RefObject, + options: IFullOptions, + deps?: DependencyList, +): void; + +export function useRectEffect( + effect: (rect: IRect | null) => void, + ref: RefObject, + third?: any, + fourth?: any, +) { + const { options, deps } = sortArgs(third, fourth); useViewportEffect( (_, snapshot) => effect(snapshot), { @@ -165,20 +180,33 @@ export const useRectEffect = ( recalculateLayoutBeforeUpdate: () => ref.current ? ref.current.getBoundingClientRect() : null, }, - [ref.current], + [ref.current, ...deps], ); -}; +} -export const useRect = ( +export function useRect( ref: RefObject, - options?: IFullOptions, -): IRect | null => { + deps?: DependencyList, +): void; + +export function useRect( + ref: RefObject, + options: IFullOptions, + deps?: DependencyList, +): void; + +export function useRect( + ref: RefObject, + 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( recalculateLayoutBeforeUpdate: (viewport: IViewport) => T,