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>)}</>)}