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

Asked
Active3 hr before
Viewed126 times

4 Answers

chakrausedisclosureparentchildcomponentusing
90%

You can use the hook useDisclosure inside the parent component, then pass the state isOpen and onClose to your 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., By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy. ,Connect and share knowledge within a single location that is structured and easy to search.

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

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?,Then in your view you will want to wrap whatever needs the context in <ModalProvider>,Are you sure that works? An example would be wonderful.,And then in the case of calls to the modal, you will need to do something like

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

import React, {
   useContext,
   createContext
} from 'react'

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

import PropTypes from 'prop-types'

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

import {
   useDisclosure
} from '@chakra-ui/hooks'

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const ModalContext = createContext()

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

// Provider component that wraps your app and makes modal object ...

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

// ... available to any child component that calls useModal().

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

export function ModalProvider({
   children
}) {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const modal = useModalDisclosure()

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return (

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

<ModalContext.Provider value={modal}>

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

{
   children
}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

</ModalContext.Provider>

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

)

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

ModalProvider.propTypes = {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

children: PropTypes.element.isRequired

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

// Hook for child components to get the modal object ...

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

// ... and re-render when it changes.

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

export const useModal = () => {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return useContext(ModalContext)

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

// Provider hook that creates modal object and handles state

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

function useModalDisclosure() {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const {
   isOpen,
   onOpen,
   onClose
} = useDisclosure()

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const isModalOpen = () => {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return isOpen

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const closeModal = () => {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return onClose

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

const openModal = () => {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return onOpen

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

return {

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

openModal,

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

closeModal,

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

isModalOpen

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}

use-modal.js

import React, { useContext, createContext } from 'react'
import PropTypes from 'prop-types'
import { useDisclosure } from '@chakra-ui/hooks'
const ModalContext = createContext()
// Provider component that wraps your app and makes modal object ...
// ... available to any child component that calls useModal().
export function ModalProvider ({ children }) {
const modal = useModalDisclosure()
return (
<ModalContext.Provider value={modal}>
{children}
</ModalContext.Provider>
)
}
ModalProvider.propTypes = {
children: PropTypes.element.isRequired
}
// Hook for child components to get the modal object ...
// ... and re-render when it changes.
export const useModal = () => {
return useContext(ModalContext)
}
// Provider hook that creates modal object and handles state
function useModalDisclosure () {
const { isOpen, onOpen, onClose } = useDisclosure()
const isModalOpen = () => {
return isOpen
}
const closeModal = () => {
return onClose
}
const openModal = () => {
return onOpen
}
return {
openModal,
closeModal,
isModalOpen
}
}

}
load more v
72%

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,Next story Intellisense on vsCode Arduino c++, Codechef | April 21 challenge | Chef and Dice | solution |SDICE ,Previous story Oracle APEX: Session state protection violation error on Display Only page item

onToggle
load more v
65%

The useDisclosure hook returns an object with the following fields:,The useDisclosure hook accepts an optional object with the following properties:,useDisclosure is a custom hook used to help handle common open, close, or toggle scenarios. It can be used to control feedback component such as Modal, AlertDialog, Drawer, etc.,Build faster with Premium Chakra UI Components 💎

.css - zbg2gu {
   -webkit - padding - start: var (--chakra - space - 5);
   padding - inline - start: var (--chakra - space - 5); - webkit - padding - end: var (--chakra - space - 5);
   padding - inline - end: var (--chakra - space - 5);
}
import {
   useDisclosure
} from "@chakra-ui/react"
load more v

Other "chakra-usedisclosure" queries related to "Using the Chakra-UI useDisclosure hook on both a parent and child component"