[radix] popover when hover trigger

아래 이슈에서 도움을 받았습니다.

https://github.com/radix-ui/primitives/issues/2051

Popover when hover · Issue #2051 · radix-ui/primitives

 

popover 기능은 일반적으로 hover 되었을 때 나타나는 것이 조금 더 자연스러운 ux라고 생각합니다.

다만 radix의 trigger 기능은 기본적으로 클릭이벤트를 전제하고 있기 때문에

처음에는 어떻게 설정을 해줘야 할 지 혼란스러울 수 있습니다.

import { Button } from '@mui/material';
import * as Popover from '@radix-ui/react-popover';
import React from 'react';

const PopoverExample = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleMouseEnter = () => {
    setIsOpen(true);
  };

  const handleMouseLeave = () => {
    setIsOpen(false);
  };

  return (
    <Popover.Root open={isOpen} onOpenChange={setIsOpen}>

      <Popover.Trigger
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        Hover me
      </Popover.Trigger>

      <Popover.Portal>
        <Popover.Content className="fadeinout">example content</Popover.Content>
      </Popover.Portal>
    </Popover.Root>
  );
};

export default PopoverExample;

Root에 open과 onopenChange prop을 전달해줄 수 있습니다.

useState에 쉽게 매칭되는 구조로

open은 상태를 전달하고 onOpenChange에는 set함수를 넣어주면 됩니다.

 

이후 onMouseEnter, onMouseLeave 리액트 이벤트를 이용하여

호버되었을 때에는 화면에 콘텐츠를 표시하고

호버상태가 풀린 경우에는 콘텐츠를 더이상 표시하지 않게 open 상태를 false로 전환합니다.