Benutzerdefinierter Reaktions-Hook: useResizeObserver

In diesem Beitrag teile ich einen benutzerdefinierten React-Hook namens useResizeObserver. Mit diesem Hook können Sie das umgrenzende Client-Rect eines DOM-Elements beobachten und abrufen und das Rect aktualisieren, wenn die Größe des Elements geändert wird. Es ist Teil meiner React-Bibliothek „react-helper-hooks“, die viele nützliche Hooks enthält, um Entwicklern Zeit zu sparen.

Quellcode

import { useEffect, useRef, useState } from 'react';

type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;

export default function useResizeObserver(): Array<any> {
  const ref = useRef<any>(null);
  const [rect, setRect] = useState<ObserverRect>();

  useEffect(() => {
    const observer = new ResizeObserver(() => {
      if (ref.current) {
        const boundingRect = ref.current.getBoundingClientRect();
        setRect(boundingRect);
      }
    });
    observer.observe(ref.current);

    return () => observer.disconnect();
  }, [ref]);

  return [ref, rect];
}

Wie es funktioniert

Der useResizeObserver-Hook nutzt die ResizeObserver-API, um Größenänderungen eines DOM-Elements zu verfolgen. Es gibt eine Referenz zurück, die an das Zielelement und das aktuelle begrenzende Client-Rect dieses Elements angehängt werden soll.

Beispielverwendung

Hier ist ein Beispiel für die Verwendung des useResizeObserver-Hooks in einer Funktionskomponente:

import React from 'react';
import useResizeObserver from './useResizeObserver';

function ExampleComponent() {
  const [ref, rect] = useResizeObserver();

  return (
    <>
       <textarea ref={ref} style={{ resize: 'both', height: 100, width: 300 }}>
           Resize this element to see the changes:
       </textarea>

      {rect && (
        <div>
          <p>Top: {rect.top}</p>
          <p>Left: {rect.left}</p>
          <p>Width: {rect.width}</p>
          <p>Height: {rect.height}</p>
        </div>
      )}
    </>
  );
}

export default ExampleComponent;

In diesem Beispiel wird die Größe eines Textbereichselements geändert. Der useResizeObserver-Hook verfolgt seine Abmessungen, die außerhalb des Textbereichs angezeigt werden.

Über React-Helper-Hooks

Der useResizeObserver-Hook ist Teil meiner React-Bibliothek, React-Helper-Hooks. Diese Bibliothek enthält eine Sammlung benutzerdefinierter Hooks, die Entwicklern Zeit und Mühe sparen sollen. Hooks wie useResizeObserver bieten wiederverwendbare, effiziente Lösungen für häufige Aufgaben in React-Anwendungen.

Schauen Sie sich gerne in der Bibliothek um und tragen Sie bei oder schlagen Sie neue Hooks vor!

Lassen Sie mich wissen, wenn Sie Änderungen oder zusätzliche Informationen benötigen!

Folgen Sie mir auf X (Twitter) – https://twitter.com/punitsonime
Vernetzen wir uns über Linkedin – https://www.linkedin.com/in/punitsonime/

Das obige ist der detaillierte Inhalt vonBenutzerdefinierter Reaktions-Hook: useResizeObserver. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!