How to pass getBoundingClientRect to a child component

[joelstein]

I'm struggling to understand how I can create a reusable React popover with Floating UI when my reference element is a bounding box.

For example, I'm using something like the following code to set and update the reference element:

refs.setPositionReference({
  getBoundingClientRect: () =>
    document.getElementsByClassName("fc-highlight")[0].getBoundingClientRect(),
});

With examples like this, how would I pass this reference element to the popover?

[atomiks]

You can add a prop called getPositionReference for usePopover that uses a layout effect to call refs.setPositionReference().

https://codesandbox.io/p/sandbox/vigorous-shirley-yxzx9m?file=%2Fsrc%2FPopover.tsx%3A64%2C1-70%2C44

<Popover getPositionReference={getPositionReference}>

// You'd probably want to use a `useEffectEvent` utility here instead
// to prevent requiring the function to be memoized/static reference.
React.useLayoutEffect(() => {
  if (getPositionReference) {
    context.refs.setPositionReference(getPositionReference());
  }
}, [context.refs, getPositionReference]);

If using useEffectEvent (not in stable React yet, can be polyfilled, which it is in this library internally):

const getPositionReferenceStable = useEffectEvent(getPositionReference);

React.useLayoutEffect(() => {
  if (getPositionReferenceStable) {
    context.refs.setPositionReference(getPositionReferenceStable());
  }
}, [context.refs, getPositionReferenceStable]);

[joelstein]

Thanks! That works perfectly.