Hook React personnalisé : useResizeObserver

Dans cet article, je partagerai un hook React personnalisé appelé useResizeObserver. Ce hook vous aide à observer et à obtenir le rect client limite d'un élément DOM, en mettant à jour le rect chaque fois que l'élément est redimensionné. Cela fait partie de ma bibliothèque React, React-helper-hooks, qui contient de nombreux hooks utiles pour faire gagner du temps aux développeurs.

Code source

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];
}

Comment ça marche

Le hook useResizeObserver exploite l'API ResizeObserver pour suivre les changements de taille d'un élément DOM. Il renvoie une référence à attacher à l'élément cible et au rect client actuel de cet élément.

Exemple d'utilisation

Voici un exemple d'utilisation du hook useResizeObserver dans un composant fonctionnel :

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;

Dans cet exemple, un élément textarea est rendu redimensionnable. Le hook useResizeObserver suit ses dimensions, qui sont affichées en dehors de la zone de texte.

À propos des crochets d'aide à la réaction

Le hook useResizeObserver fait partie de ma bibliothèque React, react-helper-hooks. Cette bibliothèque comprend une collection de hooks personnalisés conçus pour faire gagner du temps et des efforts aux développeurs. Des hooks comme useResizeObserver fournissent des solutions réutilisables et efficaces pour les tâches courantes dans les applications React.

N'hésitez pas à consulter la bibliothèque et à contribuer ou suggérer de nouveaux hooks !

---

Faites-moi savoir si vous avez besoin de modifications ou d'informations supplémentaires !

---

Suivez-moi sur X (Twitter) - https://twitter.com/punitsonime
Connectons-nous sur linked in - https://www.linkedin.com/in/punitsonime/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!