Cangkuk Reaksi Tersuai: useResizeObserver

Dalam siaran ini, saya akan berkongsi cangkuk React tersuai yang dipanggil useResizeObserver. Cangkuk ini membantu anda memerhati dan mendapatkan rect klien terikat bagi elemen DOM, mengemas kini rect apabila elemen itu diubah saiznya. Ia adalah sebahagian daripada pustaka React saya, react-helper-hooks, yang mengandungi banyak cangkuk berguna untuk menjimatkan masa pembangun.

Kod Sumber

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

Bagaimana Ia Berfungsi

Kait useResizeObserver memanfaatkan API ResizeObserver untuk menjejak perubahan saiz elemen DOM. Ia mengembalikan ref untuk dilampirkan pada elemen sasaran dan klien terikat semasa elemen tersebut.

Contoh Penggunaan

Berikut ialah contoh cara menggunakan cangkuk useResizeObserver dalam komponen berfungsi:

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;

Dalam contoh ini, elemen textarea dibuat boleh diubah saiz. Cangkuk useResizeObserver menjejaki dimensinya, yang dipaparkan di luar kawasan teks.

Mengenai react-helper-hooks

Kait useResizeObserver ialah sebahagian daripada pustaka React saya, react-helper-hook. Pustaka ini termasuk koleksi cangkuk tersuai yang direka untuk menjimatkan masa dan usaha pembangun. Cangkuk seperti useResizeObserver menyediakan penyelesaian yang boleh digunakan semula dan cekap untuk tugas biasa dalam aplikasi React.

Jangan ragu untuk melihat perpustakaan dan menyumbang atau mencadangkan cangkuk baharu!

---

Beri tahu saya jika anda memerlukan sebarang perubahan atau maklumat tambahan!

---

Ikuti saya di X ( Twitter ) - https://twitter.com/punitsonime
Mari sambung pada pautan dalam - https://www.linkedin.com/in/punitsonime/

Atas ialah kandungan terperinci Cangkuk Reaksi Tersuai: useResizeObserver. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!