useMergeRefs

useMergeRefs is a custom hook used to merge several react refs into a single one.

Import#

import { useMergeRefs } from '@chakra-ui/react'

Return value#

The useMergeRefs hook returns a function that receives the element and assign the value to the given React refs.

Usage#

function Example({ ref, ...props }) {
const internalRef = React.useRef()
const refs = useMergeRefs(internalRef, ref)
return (
<div {...props} ref={refs}>
A div with multiple refs.
</div>
)
}

Usage combining with another Chakra-UI hooks#

function Example({ ref, ...props }) {
const outsideRef = React.useRef()
const { isOpen, onOpen, onClose } = useDisclosure()
const { popperRef, referenceRef } = usePopper()
useOutsideClick({
ref: outsideRef,
handler: () => isOpen && onClose(),
})
const buttonEl = useMergeRefs(outsideRef, referenceRef)
return (
<>
<button ref={buttonEl} onClick={onOpen}>
Click me to see the popover
</button>
{isOpen && (
<Box ref={popperRef} bg='green'>
Click outside to close me
</Box>
)}
</>
)
}
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel