-
Notifications
You must be signed in to change notification settings - Fork 47
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to pass a clientRect in v2? #100
Comments
If anyone is still interested, this hook should work alright. (I used 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,
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 #83 for this but no suggestion to fix, so I'm reopening.
The text was updated successfully, but these errors were encountered: