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#

A div with multiple refs.

function Example({ref, ...props}) {
  const internalRef = React.useRef()
  const refs = useMergeRefs(internalRef, ref)

  return (
    <div {...props} ref={refs}>
      A div with multiple refs.
    </div>
  )
}

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

Editable Example

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

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

Editable Example

Edit this page