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!