【React】下にフリックして閉じられるモーダルコンポーネントを作ってみた

その昔 Vue.js 製の SwipeableDrawer という物を作りました。↓
https://qiita.com/dsflon/items/11a7cf780b3b42d10016

これは、とあるレストラン予約サービスのUIに採用され、ちょっとだけ評価されました。
https://restaurant.ikyu.com/101099/plan11927887
（ で見てね）

これの React 版を作ったというお話です

案件でこのUIを利用する可能性があり、重い腰を上げて現代版に作り直しました。

デモ

https://dsflon.github.io/SwipeableDrawer.React/
（ で見てね）

github

使い方

こちら↓に本体があるので、
https://github.com/dsflon/SwipeableDrawer.React/tree/main/src/components/SwipeableDrawer
適当なところに配置して、下記のようにimportして使います。

import { useState } from 'react';

import { SwipeableDrawer } from '~/components/SwipeableDrawer';

export default function Home() {
  const [opened, setOpened] = useState(false);

  const beforeEnter = () => {
    console.log('beforeEnter');
  };

  const afterEnter = () => {
    console.log('afterEnter');
  };

  const beforeLeave = () => {
    console.log('beforeLeave');
  };

  const afterLeave = () => {
    console.log('afterLeave');
  };

  const scrollDrawer = () => {
    console.log('scrollDrawer');
  };

  return (
    <>
      <button
        onClick={() => setOpened(true)}
      />

      <SwipeableDrawer
        opened={opened}
        speed={300}
        easingType = 'easeOutCubic'
        onClose={() => setOpened(false)}
        onBeforeEnter={() => beforeEnter()}
        onAfterEnter={() => afterEnter()}
        onBeforeLeave={() => beforeLeave()}
        onAfterLeave={() => afterLeave()}
        onScroll={() => scrollDrawer()}
      >
        <div>
          contents
        </div>
      </SwipeableDrawer>
    </>
  );
}

あとは煮るなり焼くなり、よければ、どうぞ。

余談

• モーダル裏をスクロールさせない方法っていまやjs不要なんですね、助かる
  https://myb63.com/blog/css-modal-scrollnone
• 現在最新と思われるiOS16.4.1、android13 でしか検証していません