【React】ドロワーを作る

今回はReactでmaterial-uiを使ってドロワーを作成します。

インストール

以下コマンドを使って、パッケージをインストールします。

npm install @mui/material @emotion/react @emotion/styled

※上記はnpmを使用している場合で、他環境の場合は以下を参照してください。

コード

公式サイトのサンプルは以下ページです。

それをそのまま貼ってもおもしろくないので、テンプレートとして使用できる様にアレンジしたのが以下のコードです。
styleはtailwindcssを使用しており、xボタンのアイコンにheroiconsを使用しています。

TemplateDrawer.tsx

import React from "react";
import { Drawer } from "@mui/material";
import { XMarkIcon } from "@heroicons/react/24/outline";

/** ドロワーテンプレート */
export const TemplateDrawer = (props: {
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
    children?: JSX.Element | JSX.Element[];
    anchor?: "left" | "top" | "right" | "bottom";
}) => {
    const { isOpen, setIsOpen, children, anchor = "left" } = props;
    return (
        <Drawer
            open={isOpen}
            onClose={() => setIsOpen(false)}
            anchor={anchor}
        >
            <div className={`min-w-[300px]`}>
                <div className="ml-auto mr-3 mt-3 w-fit">
                    <XMarkIcon className="size-8 hover:bg-gray-200" onClick={() => setIsOpen(false)} />
                </div>
                {children}
            </div>
        </Drawer>
    )
}

今回作成したサンプル

以下ページにサンプルを作成しました

ドロワー内にドロワーが表示できる様に作ったので、以下 gif の様に、無限にドロワーを展開できる様になっています。

コードは以下のところに入れてあります