Drawer
The Drawer component provides a hidden or off-canvas panel that can slide in or out from the edge of the screen, offering additional navigation or content without obstructing the main interface. One common use case is when user is analysing a list of entries from a table and they quickly wants to see details for some entries.
Usage
The Drawer component uses a slot-based API for its structure. Use DrawerHeader, DrawerContent, and DrawerFooter as child components to compose your drawer:
import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from 'reablocks';
<Drawer open={open} onClose={() => setOpen(false)}>
<DrawerHeader>Drawer Title</DrawerHeader>
<DrawerContent>
{/* Your content here */}
</DrawerContent>
<DrawerFooter>
{/* Footer actions here */}
</DrawerFooter>
</Drawer>All three slots are optional - you can use any combination of them based on your needs.
Examples
Basic example
Drawer as bottom sheet
Custom Animation
Define custom animations for the drawer, using the animation, animationViewChange props:
Learn more about how to customize the animations in the Custom Animations section.
Theme
This component uses the following default theme:
- root{}(7 keys)
- Show all
Learn more about how to customize in the Theme documentation.
API
| Prop | Description | Default |
|---|---|---|
position | Position of the drawer."start" | "end" | "top" | "bottom" | end |
size | Size of the drawer.string | number | 80% |
className | CSS class name for the drawer.string | |
contentClassName | CSS class name for the content of the drawer.string | |
backdropClassName | CSS class name for the backdrop of the drawer.string | |
disablePadding | Whether to disable padding for the drawer content.boolean | false |
header | The header of the drawer.
@deprecated Use DrawerHeader slot component instead.
@example // Instead of:
<Drawer header="My Title">...</Drawer>
// Use:
<Drawer>
<DrawerHeader>My Title</DrawerHeader>
<DrawerContent>...</DrawerContent>
</Drawer>ReactNode | |
showCloseButton | Whether to show the close button.boolean | true |
children | The content of the drawer.
Supports slot-based approach with DrawerHeader, DrawerContent, and DrawerFooter.ReactNode | |
headerElement | The React element for the drawer header.
@deprecated Use DrawerHeader slot component instead.ReactElement<DrawerHeaderProps, ForwardRefExoticComponent<DrawerHeaderProps & RefAttributes<HTMLElement>>> | <DrawerHeader /> |
theme | Theme for the Drawer.DrawerTheme | |
initial | Properties, variant label or array of variant labels to start in.
Set to `false` to initialise with the values in `animate` (disabling the mount animation)
```jsx
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
```
@deprecated Use animation configuration instead.boolean | TargetAndTransition | VariantLabels | |
animate | Values to animate to, variant label(s), or `LegacyAnimationControls`.
```jsx
// As values
<motion.div animate={{ opacity: 1 }} />
// As variant
<motion.div animate="visible" variants={variants} />
// Multiple variants
<motion.div animate={["visible", "active"]} variants={variants} />
// LegacyAnimationControls
<motion.div animate={animation} />
```
@deprecated Use animation configuration instead.boolean | TargetAndTransition | VariantLabels | |
exit | A target to animate to when this component is removed from the tree.
This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after
an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.
```jsx
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
```
@deprecated Use animation configuration instead.TargetAndTransition | VariantLabels | |
transition | Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.
```jsx
const spring = {
type: "spring",
damping: 10,
stiffness: 100
}
<motion.div transition={spring} animate={{ scale: 1.2 }} />
```
@deprecated Use animation configuration instead.Transition | |
animation | Animation configuration for the drawer.MotionNodeAnimationOptions | |
open | If true, the global overlay is open.boolean | |
closeOnBackdropClick | If true, the global overlay will close when the backdrop is clicked.boolean | true |
hasBackdrop | If true, the global overlay will have a backdrop.boolean | true |
closeOnEscape | If true, the global overlay will close when the escape key is pressed.boolean | true |
onClose | A function that is called when the global overlay is closed.() => void |
Last updated on