react-confettiで紙吹雪を舞わせる

はじめに

Vercelでデプロイしたら紙吹雪が舞い、高まったので実装しらべました。
お祝いする/されるのは喜ばしいものですね

今回使うのはreact-confettiというライブラリです。

公開されているデモ

https://alampros.github.io/react-confetti/?path=/story/props-demos--knobs
色んなエフェクトがかけられそうですね。

実装

まずは react-confetti をインストールします。
ターミナルから下記のコマンドを実行してください。
react-use は width と height の指定が推奨されているためインストールしています。

必要なパッケージのインストール

$ npm install react-confetti react-use

インストールが終わったら、reactでコンポーネントを記述します。これだけ！

react

import React from "react"
import useWindowSize from 'react-use/lib/useWindowSize'
import Confetti from 'react-confetti'

export default () => {
  const { width, height } = useWindowSize()
  return (
    <>
      <Confetti
        width={width}
        height={height}
        recycle={true}
      />
      <h1>ありがとう</h1>
    </>
  )
}

完成画面

感想

こんな高まるエフェクトが一瞬で実装できるのは喜ばしいことですね