export default function Popper()

in src/components/common/Popper/index.tsx [11:49]

• 39 lines of code
• 1 McCabe index (conditional complexity)

export default function Popper(props: IProps) {
  const targetRef = useRef();
  const contentRef = useRef();
  const [isOpen, setIsOpen] = useState(false);
  const handleMouseEnter = () => {
    setIsOpen(true);
  };
  const handleMouseLeave = () => {
    setIsOpen(false);
  };
  useEffect(() => {
    createPopper(targetRef.current, contentRef.current, {
      placement: "bottom",
      modifiers: [],
    });
  }, []);
  return (
    <>
      <div
        className="popper-target"
        ref={targetRef}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        {props.children}
      </div>
      <div ref={contentRef} className={styles.contentRef}>
        <div
          className={clsx(styles.popperContent, {
            [styles.isOpen]: isOpen,
          })}
        >
          <span>{props.content}</span>
          <div className={styles.arrow}></div>
        </div>
      </div>
    </>
  );
}