vaul-snap-points

⚠️ Unofficial Fork

This is an unofficial fork of vaul that includes PR #548 by @s-fletcher, which adds support for dynamic snap points via the <Drawer.SnapPoint /> component.

Not actively maintained - This package exists to make the snap points feature available while the original PR is pending. Use at your own risk.

What This Adds

The original vaul supports snap points with hard-coded values, but this fork adds:

• <Drawer.SnapPoint /> component - Define snap positions dynamically based on DOM elements
• Responsive behavior - Snap points automatically adapt to different screen sizes
• Offset support - Fine-tune snap point positions with the offset prop
• Callback functionality - Combine hard-coded and dynamic snap points

Installation

npm install vaul-snap-points
# or
pnpm add vaul-snap-points
# or
yarn add vaul-snap-points

Example Usage

Basic Dynamic Snap Points

import { Drawer } from 'vaul-snap-points';

function MyDrawer() {
  return (
    <Drawer.Root snapPoints={(embeddedPoints) => [...embeddedPoints, 1]}>
      <Drawer.Trigger>Open Drawer</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Overlay />
        <Drawer.Content>
          <Drawer.SnapPoint offset={0} />
          <div>Content section 1</div>

          <Drawer.SnapPoint offset={24} />
          <div>Content section 2</div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

How It Works

Instead of defining snap points with hard-coded pixel or percentage values:

// Old approach (still supported)
<Drawer.Root snapPoints={['148px', '355px', 1]}>

You can now use <Drawer.SnapPoint /> components that automatically calculate their positions based on where they appear in the DOM:

// New approach - responsive and dynamic
<Drawer.Root snapPoints={(embeddedPoints) => [...embeddedPoints, 1]}>
  <Drawer.Content>
    <Drawer.SnapPoint offset={0} />
    {/* Content that determines the snap point height */}
    <Drawer.SnapPoint offset={24} />
    {/* More content */}
  </Drawer.Content>
</Drawer.Root>

The snap points will automatically adjust based on the actual rendered height of your content.

Documentation

For full API documentation and additional features, see the original vaul documentation.

All original vaul features are supported in this fork.

Credits

• Original Library: vaul by Emil Kowalski
• Snap Points Feature: PR #548 by @s-fletcher
• Fork Maintainer: @wiwo-dev

License

MIT - See LICENSE.md

This project maintains the original MIT license from vaul. All credit for the original work goes to Emil Kowalski.