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 |