Root
Contains all the parts of a drawer.
import { useState } from 'react'
import { Drawer, type Snap } from '@vladyoslav/drawer'
// or import { DrawerRoot } from '@vladyoslav/drawer'
export const MyComponent = () => {
const snapPoints = ['100px', '50%', '100%']
const [snap, setSnap] = useState<Snap>(snapPoints[0])
const [open, setOpen] = useState(false)
return (
<Drawer.Root
// defaultOpen={true} cannot be used with `open` and `onOpenChange`
open={open}
onOpenChange={setOpen}
snapPoints={snapPoints}
snap={snap}
setSnap={setSnap}
modal={false}
dismissible={false}
shouldScaleBackground={true}
scaleFrom={snapPoints[1]}
>
...
</Drawer.Root>
)
}
API
The Root
component takes all props from @radix-ui/react-dialog
(opens in a new tab) Root
and some additional ones:
Prop | Type | Default |
---|---|---|
defaultOpen | boolean | |
open | boolean | |
onOpenChange | function | |
modal | boolean | true |
snapPoints | Snap[] | ['100%'] |
snap | Snap | |
setSnap | SetSnap | |
dismissible | boolean | true |
scrollLockTimeout | number | 300 |
scaleFrom | number | string | 0 |
shouldScaleBackground | boolean | false |