ResizeObserverCase() — react Function Reference

Architecture documentation for the ResizeObserverCase() function in ResizeObserverCase.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ ResizeObserverCase() — react Function Reference

Dependency Diagram

graph TD
  6e65e1df_22fb_c118_5fd3_17f2586337e4["ResizeObserverCase()"]
  5baa25a0_1e52_b988_1762_40c15ffae851["ResizeObserverCase.js"]
  6e65e1df_22fb_c118_5fd3_17f2586337e4 -->|defined in| 5baa25a0_1e52_b988_1762_40c15ffae851
  style 6e65e1df_22fb_c118_5fd3_17f2586337e4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/ResizeObserverCase.js lines 7–63

export default function ResizeObserverCase() {
  const fragmentRef = useRef(null);
  const [width, setWidth] = useState([0, 0, 0]);

  useEffect(() => {
    const resizeObserver = new window.ResizeObserver(entries => {
      if (entries.length > 0) {
        setWidth(prev => {
          const newWidth = [...prev];
          entries.forEach(entry => {
            const index = parseInt(entry.target.id, 10);
            newWidth[index] = Math.round(entry.contentRect.width);
          });
          return newWidth;
        });
      }
    });

    fragmentRef.current.observeUsing(resizeObserver);
    const lastFragmentRefValue = fragmentRef.current;
    return () => {
      lastFragmentRefValue.unobserveUsing(resizeObserver);
    };
  }, []);

  return (
    <TestCase title="Resize Observer">
      <TestCase.Steps>
        <li>Resize the viewport width until the children respond</li>
        <li>See that the width data updates as they elements resize</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The Fragment Ref has a ResizeObserver attached which has a callback to
        update the width state of each child node.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fragment ref={fragmentRef}>
          <div className="card" id="0" style={{width: '100%'}}>
            <p>
              Width: <b>{width[0]}px</b>
            </p>
          </div>
          <div className="card" id="1" style={{width: '80%'}}>
            <p>
              Width: <b>{width[1]}px</b>
            </p>
          </div>
          <div className="card" id="2" style={{width: '50%'}}>
            <p>
              Width: <b>{width[2]}px</b>
            </p>
          </div>
        </Fragment>
      </Fixture>
    </TestCase>
  );
}