사용자 정의 React Hook: useResizeObserver-JS 튜토리얼-php.cn

사용자 정의 React Hook: useResizeObserver

王林

풀어 주다： 2024-08-02 10:03:11

원래의

684명이 탐색했습니다.

Custom React Hook: 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 요소의 크기 변경을 추적합니다. 대상 요소와 해당 요소의 현재 경계 클라이언트 직사각형에 첨부될 참조를 반환합니다.

사용 예

다음은 기능 구성 요소에서 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;

로그인 후 복사

이 예에서는 텍스트 영역 요소의 크기를 조정할 수 있습니다. useResizeObserver 후크는 텍스트 영역 외부에 표시되는 크기를 추적합니다.

반응 도우미 후크 정보

useResizeObserver 후크는 내 React 라이브러리인 React-helper-hooks의 일부입니다. 이 라이브러리에는 개발자의 시간과 노력을 절약하도록 설계된 사용자 정의 후크 모음이 포함되어 있습니다. useResizeObserver와 같은 후크는 React 애플리케이션의 일반적인 작업을 위한 재사용 가능하고 효율적인 솔루션을 제공합니다.

자유롭게 라이브러리를 확인하고 새로운 후크에 기여하거나 제안해 주세요!

변경 사항이나 추가 정보가 필요하면 알려주세요!