function MyApp() {
const [isOpen, setIsOpen] = React.useState(false)
const containerRef = React.useRef(null)
const triggerRef = React.useRef(null)
const closeOverlay = React.useCallback(() => {
setIsOpen(false)
}, [setIsOpen])
const toggleOverlay = React.useCallback(() => {
setIsOpen(!isOpen)
}, [setIsOpen, isOpen])
useOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [triggerRef]})
return (
<>
<Button ref={triggerRef} onClick={toggleOverlay}>
toggle
</Button>
{isOpen && (
<Box
borderWidth="1px"
borderStyle="solid"
borderColor="border.accent.teal"
borderRadius={2}
height="212px"
mt="24px"
bg="background.accent.teal.bolder"
display="flex"
alignItems={`center`}
justifyContent={`center`}
ref={containerRef}
>
This is the content. useClickOutside takes a callback function that is called when clicking outside of the
target `ref`.
</Box>
)}
</>
)
}
render(<MyApp />)