How to pass a clientRect in v2?

[nathggns]

I'm migrating from useToggleLayer to useLayer as upgrading from v1 to v2, but I need to be able to pass a specific clientRect when opening. This API appears to have disappeared in the upgrade, but no alternative is mentioned in the migration guide

There's a closed issue at https://github.com/everweij/react-laag/issues/83 for this but no suggestion to fix, so I'm reopening.

[rseyferth]

If anyone is still interested, this hook should work alright. (I used useMousePositionAsTrigger as an example)

import useResizeObserver from '@react-hook/resize-observer'
import * as React from 'react'
import { IBounds } from 'react-laag'

export type UseRefAsTriggerResult = {
    ref: React.RefObject<HTMLElement>
    hasRefBounds: boolean
    trigger: {
        getBounds: () => IBounds
        getParent?: () => HTMLElement
    }
}

const EMPTY_BOUNDS: IBounds = {
    top: 0,
    left: 0,
    right: 1,
    bottom: 1,
    width: 1,
    height: 1,
}

export const useRefAsTrigger = (propRef?: React.RefObject<HTMLElement>): UseRefAsTriggerResult => {
    // Use the prop ref if it's provided, otherwise create a new one
    const _ref = React.useRef<HTMLElement>(null)
    const ref = propRef ?? _ref

    const [bounds, setBounds] = React.useState<IBounds>(EMPTY_BOUNDS)

    const setBoundsFromElement = React.useCallback((el: HTMLElement) => {
        const rect = el.getBoundingClientRect()
        setBounds({ bottom: rect.bottom, top: rect.top, left: rect.left, right: rect.right, height: rect.height, width: rect.width })
    }, [])

    // Set the bounds from the ref
    useResizeObserver(ref, e => {
        setBoundsFromElement(e.target as HTMLElement)
    })
    React.useEffect(() => {
        if (ref.current) setBoundsFromElement(ref.current)
    }, [ref])

    const hasRefBounds = bounds !== EMPTY_BOUNDS

    return { ref, hasRefBounds, trigger: { getBounds: () => bounds, getParent: ref.current ? () => ref.current! : undefined } }
}

Basic usage:

const { trigger, hasRefBounds } = useRefAsTrigger(buttonRef)
const { renderLayer, layerProps } = useLayer({
  isOpen: hasRefBounds,
  trigger,
})