The Chakra Drawer component offers several features and customization options:
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:
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.
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.
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.
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.
Rendering a Form in a Drawer
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.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3