Skip to content
Permalink
Browse files
feat(utils): created a new useResizeObserver implementation
Note: This is fully backwards compatible but the old API will be removed
in the next major version bump.

The new `useResizeObserver` implementation provides a `ref` and a
`refHandler` where the `refHandler` should be passed to the DOM node
that is being watched. The `target` API is kind of deprecated since it
does some weird things and doesn't help with the resize observer loop
behavior.

When using the new API, the event handlers will now use a "subscription"
model where only a single `ResizeObserver` is created instead of multiple
since it helps increase performance.
  • Loading branch information
mlaursen committed Sep 1, 2020
1 parent deacf1c commit dc3f4df744e4357c21e527986f4b762351345dfe
Show file tree
Hide file tree
Showing 8 changed files with 889 additions and 155 deletions.
@@ -8,7 +8,7 @@ import React, {
} from "react";
import { Button } from "@react-md/button";
import {
ObservedResizeEventHandler,
OnResizeObserverChange,
ResizeObserver,
useToggle,
} from "@react-md/utils";
@@ -23,7 +23,7 @@ const DEFAULT_WIDTH = 150;
interface Size {
height: number;
width: number;
onResize: ObservedResizeEventHandler;
onResize: OnResizeObserverChange;
}

/**
@@ -36,7 +36,7 @@ function useSize(): Size {
width: DEFAULT_WIDTH,
});

const onResize: ObservedResizeEventHandler = (event) => {
const onResize: OnResizeObserverChange = (event) => {
const { height, width } = event;
setSize({ height, width });
};
@@ -11,7 +11,7 @@ import cn from "classnames";

import applyRef from "../applyRef";
import bem from "../bem";
import useResizeObserver from "../sizing/useResizeObserver";
import { useResizeObserver } from "../sizing/useResizeObserver";
import GridListCell from "./GridListCell";
import getScrollbarSize from "./scrollbarSize";
import { GridListSizeProvider, GridListSize } from "./context";
@@ -1,9 +1,7 @@
import React, { ElementType, ReactElement, useCallback, useState } from "react";

import useResizeObserver, {
ObservedResizeEventHandler,
ResizeObserverTarget,
} from "./useResizeObserver";
import { useResizeObserver, OnResizeObserverChange } from "./useResizeObserver";
import { ResizeObserverTarget } from "./useResizeObserverV1";

export interface ResizeObserverProps {
/**
@@ -51,13 +49,16 @@ export interface ResizeObserverProps {
* the next height, width, scrollHeight, scrollWidth, and the element that is
* being observed.
*/
onResize: ObservedResizeEventHandler;
onResize: OnResizeObserverChange;
}

/**
* The resize observer is used to track the size changes for a single element in
* a page. This is a bit different than a normal `ResizeListener` since it does
* a page. This is a bit different than a normal `ResizeListener` since it does
* not rely on entire page size changes.
*
* @deprecated 2.3.0 You should really use the `useResizeObserver` hook instead
* since it offers a lot more flexibility and functionality than this component.
*/
function ResizeObserver({
disableHeight = false,

0 comments on commit dc3f4df

Please sign in to comment.