preview image
プレビューを開始
2024/08/05

アニメーション付きモーダル

framer-motionでアニメーションを実装しています。

SHARE

About Preview

このコンポーネントを使いたい場合は、component.tsxの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

Default Packages

プレビュー画面では以下のパッケージがインストールされています

  • TailwindCSS
  • framer-motion
  • clsx
  • tailwind-merge
pnpm add tailwindcss framer-motion clsx tailwind-merge

Component PropsType

interface ModalProps {
  open: boolean;
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
  className?: string;
  children?: React.ReactNode[];
}