Chakra-UI

I♥️Components

Drawer

|

Chakra Docs

|

⦾ The Chakra UI Drawer component is a versatile component that provides a slide-in panel that can be used for various purposes such as displaying menus, sidebars, or modal-like content. It is commonly used to present additional options or information without taking up too much space on the screen.

The Chakra Drawer component offers several features and customization options:

  • Placement: You can specify the placement of the drawer, such as "left", "right", "top", or "bottom", to determine from which direction it will slide into view.
  • Size: You can control the size of the drawer by setting the size prop to values like "xs", "sm", "md", "lg", or "xl", or you can provide custom values.
  • Overlay: The drawer component automatically adds an overlay to the rest of the screen when it is open, making the content outside the drawer less prominent. The overlay can be customized with various properties such as opacity and background color.
  • Animation: The drawer component provides smooth animation when opening and closing. You can customize the animation using CSS transitions or other animation libraries.
  • Controlled or Uncontrolled: You have the flexibility to use the drawer as a controlled or uncontrolled component. You can manually control its open/close state, or you can use the isOpen and onClose props to let Chakra UI handle the state for you.
  • Accessibility: : The Chakra Drawer component is built with accessibility in mind. It ensures proper focus management and screen reader compatibility.

To use the Chakra Drawer component, you need to import it from the Chakra UI library and place its content inside the component. You can control the visibility of the drawer by toggling its open state using the isOpen prop.

The Drawer component is made up of the following parts. These subcomponents work together to create a flexible and customizable drawer component within the Chakra framework. By using these components, you can easily structure and organize the content within the drawer while maintaining consistent styling and behavior.

  • Drawer: serves as the main container for the drawer. It typically wraps the entire drawer content and manages its open/closed state.
  • DrawerBody: used to represent the main content area of the drawer. It is where you place the primary content or components that should be displayed within the drawer.
  • DrawerFooter: used to represent the footer section of the drawer. It is commonly used for placing actions or additional content related to the drawer's context or purpose.
  • DrawerHeader: used to represent the header section of the drawer. It typically contains a title or any other relevant information about the content within the drawer.
  • DrawerOverlay: serves as the overlay layer that covers the rest of the page when the drawer is open. It helps create the modal-like behavior by blocking interactions with the underlying content.
  • DrawerContent: the container for the entire drawer's content. It provides a default background and styling for the drawer and acts as a parent container for the header, body, and footer components.
  • DrawerCloseButton: a small button typically placed within the header section. It allows users to close the drawer by clicking on it, providing a convenient way to dismiss the drawer.

These components can be imported as follows:

Examples

Default Usage

⦾ The following is a basic drawer.

It first defines the ComponentFunctionOne functional component: useDisclosure() hook is used to get the necessary state and functions for managing the open/close state of the drawer. btnRef is a useRef reference to the Button component, which will be used as the reference for focusing when the drawer closes.

The Button component is rendered with a refassigned to btnRef and an onClick handler to open the drawer. The Drawer component is rendered with various props: isOpen controls the visibility of the drawer based on the state from useDisclosure hook. placement sets the position of the drawer (in this case, "right"). onClose is the handler function for closing the drawer. finalFocusRef assigns the btnRef as the reference for focus when the drawer closes. Inside the Drawer, there are DrawerOverlay, DrawerContent , and related components that form the structure of the drawer. DrawerHeader, DrawerBody, and DrawerFooter components are used to define the content within the drawer. The Input component is used for text input within the drawer.

Code

Drawer Placement

⦾ In the following example, the drawer placement is adjusted based on the value selected in the radio group. It displays a group of radio buttons corresponding to the four possible placements of the drawer: "Top", "Right", "Bottom", and "Left". This radio group allows the user to select the desired placement for the drawer. By default, the drawer placement is set to "right".

The setPlacement function (which is part of the state returned by useState) is invoked with the new value whenever a different radio button is selected. This updates the state and triggers a re-render of the component, causing the drawer to open in the new direction when the "Open" button is clicked.

Code

Initial Focus

⦾ When working with a form inside a drawer, it is sometimes necessary to focus on a specific element as soon as the drawer opens. This can be achieved by using the initialFocusRef prop. By passing this prop, you can designate which element should receive the initial focus when the drawer is opened. Without the initialFocusRef prop, the drawer will automatically set focus on the first focusable element within it when it is opened. This feature allows for improved accessibility and a more streamlined user experience when interacting with forms in drawers.

In the following example, we have a drawer that contains a few input fields and a save and cancel button. The initialFocusRef is used to refer to the input element. When the drawer is opened, the useEffect hook is triggered, and it checks if theinitialFocusRef.current exists. If it does, it sets focus to that input element. This ensures that when the drawer is opened, the input field will receive the initial focus.

Code

Drawer Sizes

⦾ The following example is a component that demonstrates the usage of the DraDrawer from Chakra-UI. It provides a button for each size option and displays a drawer with corresponding contents when a button is clicked.

Click on the buttons with the various drawer sizes below and see how each default property renders. On the full size, you can hit the ESC key to close the drawer. The drawer will also close when you click on the overlay.

Code

Rendering a Form in a Drawer

⦾ When using a form within a drawer, it may be necessary to incorporate a form validation library such as react-hook-form or Formik. This ensures efficient form handling and validation. The recommended approach for integrating a form in a drawer involves leveraging the native HTML form attribute and associating it with a button located outside the form. This allows for seamless form submission and validation.

The following component demonstrates how to incorporate a form within a drawer using Chakra-UI. It showcases the recommended approach for handling form submission and validation within the context of a drawer, while leveraging the native HTML form attribute and separate button placement.

Code

Did you know?

Creative Idea No. 1

Drawer with Nested Navigation: The following example showcases a drawer that contains nested navigation links, allowing for a collapsible menu. It provides a compact and efficient way to display a hierarchical navigation structure. Here, clicking on the "Menu" button toggles the drawer's visibility. The drawer contains navigation links, and when the "Services" link is clicked, a collapsible submenu expands to reveal additional links.

Code

Creative Idea No. 2

Drawer with Multi-step Form: This example demonstrates using a drawer for a multi-step form. It allows users to navigate through different form sections within the drawer, providing a streamlined and compact form experience.

Code

Creative Idea No. 3

Notifications Drawer: In the following example, we have a button labeled "Open Notifications" that opens the drawer containing a list of notifications. The notifications are stored in the notifications state array. We use the Stack component from Chakra-UI to display the notifications as badges. If there are no notifications, we display a message stating "No notifications." Additionally, there's a button labeled "Add Notification" that adds a new notification to the list and displays a success toast notification using the useToast hook from Chakra-UI.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.