JSPM – vaul@0.3.2

Package Exports

vaul
vaul/dist/index.js
vaul/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vaul) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. It uses Radix's Dialog primitive under the hood and is inspired by this tweet.

Usage

To start using the library, install it in your project:

npm install vaul

Use the drawer in your app.

import { Drawer } from 'vaul';

function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <p>Content</p>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Examples

Play around with the examples on codesandbox:

API Reference

Root

Contains all parts of a dialog. Use shouldScaleBackground to enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background. Can be controlled with the value and onOpenChange props. Can be opened by default via defaultOpen prop.

Additional props:

closeThreshold: Number between 0 and 1 that determines when the drawer should be closed. Example: `closeThreshold`` of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.

scrollLockTimeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms

Trigger

The button that opens the dialog. Props.

Content

Content that should be rendered in the drawer. Props.

Additional props:

onAnimationEnd (open: boolean) => void: Runs after enter or exit animation ends. Useful to reset the state and avoid flash of a different content when animating out.

Overlay

A layer that covers the inert portion of the view when the dialog is open. Props.

Title

An accessible title to be announced when the dialog is opened. Props.

Description

An optional accessible description to be announced when the dialog is opened. Props.

Close

The button that closes the dialog. Props.

Portal

Portals your drawer into the body.