カスタム React フック: useResizeObserver

この投稿では、useResizeObserver と呼ばれるカスタム React フックを共有します。このフックは、DOM 要素の境界クライアント四角形を観察して取得し、要素のサイズが変更されるたびに四角形を更新するのに役立ちます。これは私の React ライブラリ、react-helper-hooks の一部であり、開発者の時間を節約するための便利なフックが多数含まれています。

ソースコード

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

仕組み

useResizeObserver フックは ResizeObserver API を利用して DOM 要素のサイズ変更を追跡します。ターゲット要素とその要素の現在の境界クライアント四角形にアタッチされる ref を返します。

使用例

機能コンポーネントで useResizeObserver フックを使用する方法の例を次に示します。

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;

この例では、textarea 要素がサイズ変更可能になっています。 useResizeObserver フックは、テキストエリアの外側に表示されるその寸法を追跡します。

反応ヘルパーフックについて

useResizeObserver フックは、私の React ライブラリ、react-helper-hooks の一部です。このライブラリには、開発者の時間と労力を節約するために設計されたカスタム フックのコレクションが含まれています。 useResizeObserver のようなフックは、React アプリケーションの一般的なタスクに再利用可能で効率的なソリューションを提供します。

お気軽にライブラリをチェックして、新しいフックに貢献または提案してください!

---

変更や追加情報が必要な場合はお知らせください。

---

X ( Twitter ) でフォローしてください - https://twitter.com/punitsonime
リンクインでつながりましょう - https://www.linkedin.com/in/punitsonime/

以上がカスタム React フック: useResizeObserverの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。