@with/use-popover

Install

npm i @with/use-popover @floating-ui/react

Usage

import usePopover from '@with/use-popover'

export default function Popover() {
  const [isOpen, setIsOpen] = useState(false)
  const {
    refs,
    floatingStyles,
    context,
    arrowRef,
  } = usePopover({
    offset: 10,
    minHeight: 100
  })

  return <>
    <Sidebar>
      <Scroller>
        <Reference
          onClick={() => setIsOpen(open => !open)}
          ref={refs.setReference}
        />
      </Scroller>
    </Sidebar>

    {
      isOpen &&
      <Popover
        ref={refs.setFloating}
        style={floatingStyles}
      >
        <Content>
          popover content
        </Content>

        <FloatingArrow
          ref={arrowRef}
          context={context}
          width={12}
          height={5}
          fill={'#fff'}
          stroke={'#f2f2f2'}
          strokeWidth={1}
        />
      </Popover>
    }
  </>
}

License

MIT © fengzilong