Passing the anchor as a ref

[nenadpejic]

Hello all,

I would like to make a HOC out of Popover and currently got it working by passing both the ButtonEl and PanelEl as ReactNodes and rendering them in their appropriate place. However, I would like to instead of passing the ButtonEl as a ReactNode do it as a reference with useRef. The reason being I could then get the ref objects' width and height etc...

Something like this:

  const anchorRef = useRef(null);

  return (
    <>
      <button ref={anchorRef}>Click me</button>

      <PopoverHUI className="relative" anchorRef={anchorRef}>
        {/* <PopoverHUI.Button>Click me</PopoverHUI.Button> */}

        <PopoverHUI.Panel className="absolute z-10">
          ...Panel Content
        </PopoverHUI.Panel>
      </PopoverHUI>
    </>
  );

I know it can be done using react-popper but would like a more vanilla way. Any suggestions on how to go about this?

[nenadpejic]

Update: I'm working with passing the anchor element and referencing the button inside the HOC itself, works fine for now.

  const buttonRef = useRef<HTMLButtonElement | null>(null);

  return (
      <PopoverHUI className="relative" anchorRef={anchorRef}>
       <PopoverHUI.Button as="div" ref={buttonRef}>{anchorEl}</PopoverHUI.Button>

        <PopoverHUI.Panel className="absolute z-10">
          {children}
        </PopoverHUI.Panel>
      </PopoverHUI>
  );