Docs
Root

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:

PropTypeDefault
defaultOpenboolean
openboolean
onOpenChangefunction
modalbooleantrue
snapPointsSnap[]['100%']
snapSnap
setSnapSetSnap
dismissiblebooleantrue
scrollLockTimeoutnumber300
scaleFromnumber | string0
shouldScaleBackgroundbooleanfalse