VaulというReactライブラリが最高すぎる
masa5714Vaul公式サイト
名前覚えらんない。4文字なのに絶妙にムズい名前。
2024年9月27日にv1.0.0がリリースされたばかり。おしゃれで実用的なトースト（スナックバー）のSonnerを作った人が作っている。
何ができるのか？
Googleマップなどのネイティブアプリにある下から出てくる モーダルシート を簡単に実装できるライブラリです。モーダルシートだけではなく、スワイプで閉じれるドロワメニュー にも使えます。
余計な装飾が全くついておらずかなり扱いやすくカスタマイズしやすいです。
サンプルはこちら
▼個人開発中のWebアプリケーションに実装してみた感じ
冒頭チラついてるのは動画カットミスの影響。ブラウザ上は何ら変な動きはありません。
masa5714実装方法はシンプル
import { Drawer } from "vaul";
import { useState } from "react";
function MyComponent () {
const { Root, Portal, Content, Overlay } = Drawer;
const [isOpen, setOpen] = useState(false);
return (
<Root open={isOpen} onClose={() => setOpen(false)} direction="bottom">
<Portal>
<Overlay className="fixed inset-0 z-40 bg-black/70" />
<Content className="fixed bottom-0 left-0 w-full bg-white z-50 rounded-t-[10px] outline-none">
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
</Content>
</Portal>
</Root>
);
}
すごく直感的に実装できますね。
サンプルコードでは className="" の表記が無く、実装方法に迷ってしまいましたが、上記のように fixed を付けるのはほぼ必須です。
<Overlay className="fixed inset-0 z-40 bg-black/70" /> では、背景膜を作るための記述です。
direction="bottom" は下から出てくる動きを想定していることをコンポーネントに伝えるものです。ドロワメニューで左から出てくるものを作る場合は、 direction="left" と指定できます。閉じるスワイプ方向はここで指定する形となります。
今後の定番ライブラリになりそう！
めちゃくちゃ便利。
もはやドロワメニュー自分で実装する理由が一切無いとすら感じます。
定番ライブラリになると思うので必ずチェックしておいた方が良いでしょう。
masa5714スナップポイントも指定できる
スナップポイントも指定できます。
スナップポイントとは、表示領域に節を指定するようなイメージです。例えば、最初はタイトルだけ表示するが、少し上にスワイプするとコンテンツが出てくるみたいな動きを簡単に実現できます。
モーダル内のスクロールにも対応OK
記述はだいぶ端折りますが下記の記述がポイントです。
<Content className="h-4/5">
<div className="overflow-y-auto h-full">
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
<p>hoge</p>
</div>
</Content>
<Content> に対して h-4/5 でモーダルシートの高さを固定しておき、下のdivタグに表示領域の高さを指定した上で overflow-y-auto によってコンテンツ量が多ければスクロール許可する形になります。
この基本形だけ知っておけば特に実装に困ることは無いでしょう。