나만의 React 툴팁 구성 요소 구축

안녕하세요! 해피 삼하인/할로윈!!! 이것은 내가 최신 사이드 프로젝트에서 어떻게 반응 툴팁을 구축했는지 보여주고 싶은 매우 으스스하고 빠른 기사입니다.

이것은 간단한 도구 설명 구성 요소이며 훌륭한 라이브러리가 있다는 것을 알고 있어도 이동하기 전에 먼저 광산을 빌드하고 내 프로젝트에 새 종속성을 추가하는 데 항상 걸고 있습니다. 시작하겠습니다...

나는 이것을 위해 tailwindcss를 사용하고 있습니다. React 프로젝트에서 tailwindcss를 사용하지 않는다면 지금 당장 중지하고 https://tailwindcss.com/으로 이동하여 살펴보십시오. 또한 github에 CRA 및 Nextjs에 대한 몇 가지 스타터가 있습니다. 빠른 시작을 위해 복제하려면:
Nextjs -> https://github.com/alexandprivate/next-netlify-tailwind-starter
CRA -> https://github.com/alexandprivate/cra-tailwind-router-starter

이제 코드를 보자

전체 구성 요소

function Tooltip({ children, tooltipText }) {
    const tipRef = React.createRef(null);
    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }
    return (
        <div
            className="relative flex items-center"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            <div
                className="absolute whitespace-no-wrap bg-gradient-to-r from-black to-gray-700 text-white px-4 py-2 rounded flex items-center transition-all duration-150"
                style={{ left: "100%", opacity: 0 }}
                ref={tipRef}
            >
                <div
                    className="bg-black h-3 w-3 absolute"
                    style={{ left: "-6px", transform: "rotate(45deg)" }}
                />
                {tooltipText}
            </div>
            {children}
        </div>
    );
}

몇 가지 설명은 이 경우 툴팁이 항상 오른쪽으로 열리지만 항상 방향을 조정하거나 소품을 만들어 제어할 수도 있습니다.

도구 설명을 표시하거나 숨기도록 상태를 설정하지 않기 위해 ref를 사용하고 있습니다. 이러한 방식으로 구성 요소는 다시 렌더링을 처리할 필요가 없습니다.

const tipRef = React.createRef(null);

onMouse API로 표시 및 숨기기 이벤트 처리

    function handleMouseEnter() {
        tipRef.current.style.opacity = 1;
        tipRef.current.style.marginLeft = "20px";
    }
    function handleMouseLeave() {
        tipRef.current.style.opacity = 0;
        tipRef.current.style.marginLeft = "10px";
    }

툴팁 텍스트와 자식이 이것을 컴포지션으로 사용할 수 있는 소품이 있으므로 다음과 같이 구성 요소를 사용할 수 있습니다.

이제 도구 설명을 표시하려는 요소(예: Nextjs 링크)를 래핑하기만 하면 됩니다.

    <Tooltip tooltipText="Shop Insights">
          <Link href="/insights">
                 <a>
                    <AiOutlineAlert className="text-3xl" />
                 </a>
          </Link>
    </Tooltip>

그리고 당신은 다음과 같은 것을 얻을 것입니다 ...



행복한 코딩하시고 오늘 사탕을 너무 많이 먹지 마세요!