@chakra-ui/modal

What is @chakra-ui/modal?

@chakra-ui/modal is a component library for creating accessible and customizable modal dialogs in React applications. It provides a set of components and hooks to easily manage modal states and styles.

What are @chakra-ui/modal's main functionalities?

Basic Modal

This code demonstrates how to create a basic modal using @chakra-ui/modal. It includes a button to open the modal, and the modal itself contains a header, body, footer, and a close button.

```jsx
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, Button, useDisclosure } from '@chakra-ui/react';

function BasicModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Modal Title</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            This is the modal body.
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}
```

Centered Modal

This code demonstrates how to create a centered modal using @chakra-ui/modal. The `isCentered` prop ensures that the modal is vertically and horizontally centered on the screen.

```jsx
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, Button, useDisclosure } from '@chakra-ui/react';

function CenteredModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Centered Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Centered Modal</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            This modal is centered.
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}
```

Scrollable Modal

This code demonstrates how to create a scrollable modal using @chakra-ui/modal. The `scrollBehavior` prop set to `inside` ensures that the modal content is scrollable if it exceeds the viewport height.

```jsx
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, Button, useDisclosure } from '@chakra-ui/react';

function ScrollableModal() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Open Scrollable Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose} scrollBehavior="inside">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Scrollable Modal</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <p>Content that is long enough to require scrolling...</p>
            <p>More content...</p>
            <p>Even more content...</p>
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onClick={onClose}>
              Close
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}
```

Other packages similar to @chakra-ui/modal

react-modal

react-modal is a widely-used library for creating accessible modal dialogs in React. It provides a simple API and is highly customizable. Compared to @chakra-ui/modal, react-modal is more lightweight but may require more manual styling and state management.

react-bootstrap

react-bootstrap is a popular library that provides Bootstrap components for React, including modals. It offers a comprehensive set of pre-styled components and is easy to integrate with Bootstrap themes. Compared to @chakra-ui/modal, react-bootstrap is more opinionated in terms of styling and may be heavier due to its reliance on Bootstrap.

material-ui

material-ui is a comprehensive library of React components that implement Google's Material Design. It includes a Modal component with extensive customization options. Compared to @chakra-ui/modal, material-ui offers a broader range of components and design consistency but can be more complex to configure.

README

@chakra-ui/modal

A modal is a window overlaid on either the primary window or another dialog window. Contents behind a modal dialog are inert meaning that users cannot interact with content behind the dialog.

Installation

yarn add @chakra-ui/modal

# or

npm i @chakra-ui/modal

Import components

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from "@chakra-ui/react"

Usage

When the modal opens, focus is sent into the modal and set to the first tabbable element. If there are no tabbed element, focus is set on the ModalContent.

function BasicUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />

            <ModalBody>
              <Lorem count={2} />
            </ModalBody>

            <ModalFooter>
              <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
              </Button>
              <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  )
}

Control Focus when Modal closes

When the dialog closes, it returns focus to the element that triggered. Set finalFocusRef to element that should receive focus when the modal opens.

function ReturnFocus() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const finalRef = React.useRef()

  return (
    <>
      <Box ref={finalRef} tabIndex={-1} aria-label="Focus moved to this box">
        Some other content that'll receive focus on close.
      </Box>

      <Button mt={4} onClick={onOpen}>
        Open Modal
      </Button>

      <Modal finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
        <ModalOverlay>
          <ModalContent>
            <ModalHeader>Modal Title</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <Lorem count={2} />
            </ModalBody>

            <ModalFooter>
              <Button colorScheme="blue" mr={3} onClick={onClose}>
                Close
              </Button>
              <Button variant="ghost">Secondary Action</Button>
            </ModalFooter>
          </ModalContent>
        </ModalOverlay>
      </Modal>
    </>
  )
}

Alert Dialog

AlertDialog component is used interrupt the user with a mandatory confirmation or action.

Installation

yarn add @chakra-ui/alert-dialog

# or

npm i @chakra-ui/alert-dialog

Import components

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from "@chakra-ui/react"

Basic usage

Usage

AlertDialog requires that you provide the leastDestructiveRef prop.

Based on WAI-ARIA specifications, focus should be placed on the least destructive element when the dialog opens, to prevent users from accidentally confirming the destructive action.

function AlertDialogExample() {
  const [isOpen, setIsOpen] = React.useState()
  const onClose = () => setIsOpen(false)
  const cancelRef = React.useRef()

  return (
    <>
      <Button colorScheme="red" onClick={() => setIsOpen(true)}>
        Delete Customer
      </Button>

      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent>
            <AlertDialogHeader fontSize="lg" fontWeight="bold">
              Delete Customer
            </AlertDialogHeader>

            <AlertDialogBody>
              Are you sure? You can't undo this action afterwards.
            </AlertDialogBody>

            <AlertDialogFooter>
              <Button ref={cancelRef} onClick={onClose}>
                Cancel
              </Button>
              <Button colorScheme="red" onClick={onClose} ml={3}>
                Delete
              </Button>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  )
}

Usage with Typescript

Using the above example will throw a typescript error. You'll want to modify the type of the useRef hook to the HTML element you're placing the focus on and default the value to null.

const cancelRef = React.useRef<HTMLButtonElement>(null)

Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Installation

yarn add @chakra-ui/modal

# or

npm i @chakra-ui/modal

Import components

import {
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerBody,
  DrawerCloseButton,
} from "@chakra-ui/react"

Basic usage

Usage

By default, focus is placed on DrawerCloseButton when the drawer opens.

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Create your account</DrawerHeader>

          <DrawerBody>
            <Input placeholder="Type here..." />
          </DrawerBody>

          <DrawerFooter>
            <Button variant="outline" mr={3} onClick={onClose}>
              Cancel
            </Button>
            <Button color="blue">Save</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  )
}