Add ResizeObserver abstraction

Open
#22,519 2 comments 15 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Start by reviewing the proposed useResizeObserver API and the related issues #9337, #22303, #23641, and #27439. Compare the existing DataGrid createDetectElementResize module and the listed browser-support constraints. Done means the abstraction's scope, progressive-enhancement behavior, compatibility expectations, and documentation are defined and covered by appropriate tests.

Written by the indexing model from the issue text.

Description

scope: new proposal type: new feature waiting for 👍
  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Make it easier to react to changes from an element's position.

Examples 🌈

import { useResizeObserver } from '@material-ui/core';

const [rect, ref] = useResizeObserver();

return (
  <div ref={ref}>
    {JSON.stringify(rect)}
  </div>
);

Motivation 🔦

The platform has a built-in module to observe any changes to element.getBoundingClientRect(): the ResizeObserver API.
Over the history of the project, we have seen a couple of issues that we can solve with it:

  • #9337: correctly position the tab indicator. The interesting part of this issue is how many duplicate issues it has: A LOT. There is also a relatively simple workaround (but requires time and attention from the developers): a ref with an imperative update() method to reposition.
  • #22303: notify popper.js to update the position when the size of the referred element changes.
  • https://github.com/mui-org/material-ui/pull/14084#issuecomment-462192106: we could use it to implement auto collapsing breadcrumbs.
  • #23641: sync the height of the textarea when the width changes.
  • DataGrid: replace the createDetectElementResize() module.
  • #27439 : already uses the ResizeObserver API to re-compute the height of the content of MasonryItem whenever the content's rect height changes.

So far, we didn't move forward in this direction because of the limited support of the platform. However, the timing is probably good now: https://twitter.com/addyosmani/status/1248899086490558465. For our components, we could make the hook nop if the API isn't available (consider it a progressive enhancement) and in the documentation of the hook suggest a polyfill like https://github.com/que-etc/resize-observer-polyfill compatibility with older browsers is required.

Browser support

We support browsers that aren't supported by this API. We could provide this as a progressive enhancement.
In the data grid, we use createDetectElementResize to work around the issue but it requires a DOM node, it can be a "heavy" solution. I think that it's simpler to go down the "progressive enhancement" direction.

Benchmark

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.