CODEWITHSUNDEEP
reactjschakra-ui
Moshe
Moshe

Reputation: 6991

Using the Chakra-UI useDisclosure hook on both a parent and child component

I am trying to use the Chakra UI useDisclosure hook accross two different components. Basically, I have a parent component with a button and a child component with a different button. I want to use onToggle in the parent component and onClose in the child component -- and have BOTH OF THEM control the state of isOpen on the child component. Is this possible? If so, how? Thanks.

Upvotes: 0

Views: 9186

Answers (2)

minlare
minlare

Reputation: 2654

I know the question doesn't directly relate to Modal, but if you're inside a Modal you can useModalContext to get the disclosure methods.

import { useModalContext } from '@chakra-ui/react';
const { isOpen, onClose } = useModalContext();

Upvotes: 0

Soufiane Boutahlil
Soufiane Boutahlil

Reputation: 2604

You can use the hook useDisclosure inside the parent component, then pass the state isOpen and onClose to your child component:

function Parent() {
  const { isOpen, onToggle, onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Open Drawer</Button>
      <Child isOpen={isOpen} onClose={onClose} /> 
    </>
  )
}

Upvotes: 4

Related Questions