Vaul

Vaul — это нестилизованный компонент выдвижной панели, разработанный специально для приложений React. Он служит заменой диалоговым окнам и оптимизирован для планшетов и мобильных устройств. Компонент спроектирован с учетом гибкости, поэтому разработчики могут настраивать его поведение и внешний вид в своих приложениях.

Одна из ключевых возможностей — масштабирование фона при открытии панели, которое создает более эффектное взаимодействие. Панелью можно управлять программно, задавая ее состояние открытия с помощью управления состоянием в React.

Vaul предоставляет простой API для интеграции и четко определенные компоненты, такие как Drawer.Root, Drawer.Trigger, Drawer.Content и Drawer.Overlay. Это помогает поддерживать структуру при добавлении компонента в приложение. Библиотека поддерживает точки фиксации для удобного взаимодействия, настройку контейнера панели и возможность запретить ее закрытие.

Этот компонент подойдет разработчикам, которым нужна адаптивная панель для мобильных устройств без ограничений, связанных со стилизованными компонентами, которые могут конфликтовать с системой дизайна приложения.

Примеры использования можно посмотреть в интерактивных демонстрациях на CodeSandbox. В них показаны различные возможности компонента, в том числе управление прокруткой и пользовательские точки фиксации.