How do I show a modal box on page load using Chakra UI?

I've tried to find this information on Chakra's Documentation without success.

 import {
        useDisclosure,
        Modal,
        ModalOverlay,
        ModalContent,
        ModalCloseButton,
        ModalBody,
        Text,
    } from "@chakra-ui/react"
    
    
    export default function BasicUsage() {
        const { isOpen, onClose } = useDisclosure()
    
        return (
            <>
                <Modal isOpen={isOpen} onClose={onClose}>
                    <ModalOverlay />
                    <ModalContent>
                        <ModalCloseButton />
                        <ModalBody>
                            <Text>Hello</Text>
                        </ModalBody>
                    </ModalContent>
                </Modal>
            </>
        )
    }

CodePudding user response：

You can pass a defaultIsOpen property to the useDisclosure hook to set the default value for isOpen.

Set that property to true to have the modal open on page load.

const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })