[@mantine/hooks] use-resize-observer: Add ResizeObserver options support

mantinedev · Feb 14, 2024 · d702ef8 · d702ef8
1 parent b9faa6a
commit d702ef8
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/docs/src/pages/changelog/7-6-0.mdx b/docs/src/pages/changelog/7-6-0.mdx
@@ -192,5 +192,6 @@ series data as an argument and returns an object with props.
 - `form.setFieldValue` now supports callback function as an argument
 - `px`, `py`, `mx` and `my` [style props](/styles/style-props/) now use logical CSS properties `padding-inline`, `padding-block`, `margin-inline` and `margin-block` instead of `padding-left`, `padding-right`, etc.
 - All components now support `me`, `ms`, `ps`, `pe` [style props](/styles/style-props/) to set `margin-inline-end`, `margin-inline-start`, `padding-inline-start` and `padding-inline-end` CSS properties
-- [Tooltip](/core/tooltip), [Popover](/core/popover) and other components based on `Popover` now support `floatingStrategy` prop to control [Floating UI strategy](https://floating-ui.com/docs/usefloating#strategy).
+- [Tooltip](/core/tooltip), [Popover](/core/popover) and other components based on `Popover` now support `floatingStrategy` prop to control [Floating UI strategy](https://floating-ui.com/docs/usefloating#strategy)
 - All `@mantine/charts` components now support `children` prop which passes children to the root recharts component
+- [use-resize-observer](/hooks/use-resize-observer/) and [use-element-size](/hooks/use-element-size/) hooks now support [ResizeObserver options](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#parameters) as hook argument
diff --git a/docs/src/pages/hooks/use-element-size.mdx b/docs/src/pages/hooks/use-element-size.mdx
@@ -21,7 +21,7 @@ const { ref, width, height } = useElementSize();
 ## Definition
 
 ```tsx
-function useElementSize<T extends HTMLElement = any>(): {
+function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions): {
   MutableRefObject<T>,
   width: number,
   height: number

diff --git a/docs/src/pages/hooks/use-resize-observer.mdx b/docs/src/pages/hooks/use-resize-observer.mdx
@@ -28,7 +28,9 @@ See also [use-element-size](https://mantine.dev/hooks/use-element-size/) hook in
 ## Definition
 
 ```tsx
-function useResizeObserver<T extends HTMLElement = any>(): [
+function useResizeObserver<T extends HTMLElement = any>(
+  options?: ResizeObserverOptions
+): [
   MutableRefObject<T>,
   {
     x: number;

diff --git a/packages/@mantine/hooks/src/use-resize-observer/use-resize-observer.ts b/packages/@mantine/hooks/src/use-resize-observer/use-resize-observer.ts
@@ -13,7 +13,7 @@ const defaultState: ObserverRect = {
   right: 0,
 };
 
-export function useResizeObserver<T extends HTMLElement = any>() {
+export function useResizeObserver<T extends HTMLElement = any>(options?: ResizeObserverOptions) {
   const frameID = useRef(0);
   const ref = useRef<T>(null);
 
@@ -41,7 +41,7 @@ export function useResizeObserver<T extends HTMLElement = any>() {
 
   useEffect(() => {
     if (ref.current) {
-      observer?.observe(ref.current);
+      observer?.observe(ref.current, options);
     }
 
     return () => {
@@ -56,7 +56,7 @@ export function useResizeObserver<T extends HTMLElement = any>() {
   return [ref, rect] as const;
 }
 
-export function useElementSize<T extends HTMLElement = any>() {
-  const [ref, { width, height }] = useResizeObserver<T>();
+export function useElementSize<T extends HTMLElement = any>(options?: ResizeObserverOptions) {
+  const [ref, { width, height }] = useResizeObserver<T>(options);
   return { ref, width, height };
 }