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.
🚨 Version (v0.3.2) introduced a breaking change to this component's API. Kindly update accordingly.
The Drawer can appear from any edge of the screen. Pass the
placement prop and
set it to
Focus on specific element#
When a form is in the drawer, you might need to set focus on a specific element
when the drawer opens. Pass the
initialFocusRef prop, the drawer will set focus on the first
focusable element when it opens.
size prop if you need to adjust the size of the drawer. Values can be
- When opening the Drawer, focus is trapped inside the Drawer.
- By default, the drawer sets focus on the first focusable element. If the
initialFocusRefprop is passed, the drawer sets focus on the element with the assigned
- After the drawer closes, it'll return focus to the element that triggered it.
Drawer composes the
Modal component with these extra props:
|The ref to the initial element to receive focus when the drawer opens.|
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo