2023/10/24

Ripple Effect Animation

MUIみたいなRipple EffectをCSSアニメーションで実装しました

About Preview

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

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

pnpm add tailwindcss clsx

type RippleProps = {
  children: React.ReactNode;
  color?: string;
  className?: string;
};

Rippleアニメーションをつけたい要素を<Ripple>で囲うだけです。

Rippleの色を変更したい場合はcolorを変更してください。
(例: <Ripple color="#000">)

大きさなどを指定したい場合はclassNameにTailwindクラスを渡してください
(例: <Ripple className="w-[100px]">)