チュートリアル
React Animate Observer はとても簡単かつ直感的に実装できます。
いくつかオプションがあったりサンプルコードを用意しているためぜひ試してください 🚀
プロジェクトを準備
新しい React プロジェクトを作成してください！
もちろん、既存プロジェクトに入れても問題ありません。
以下はあくまで例ですので、自分自身のプロジェクトに合わせて環境の構築をお願いします。
React
*React プロジェクトでは vite がおすすめです。
npm create vite@latest
詳細は React 公式サイトをご覧ください 詳細は Vite 公式サイトをご覧ください
Next.js
create-next-app your-project --typescript
Gatsby.js
npx gatsby new your-project
インストール
注意
このプロジェクトでは、React のバージョン 17.0.0 以上をサポートしています。
既存プロジェクトに取り入れる場合はバージョンの確認をお願いします。
次に、react-animate-observerパッケージをプロジェクトに追加する必要があります。
npm または yarn、pnpm を使用してインストールできます
- npm
- Yarn
- pnpm
npm install react-animate-observer
yarn add react-animate-observer
pnpm add react-animate-observer
サーバーを立ち上げる
プロジェクトの設定によって変わるため、package.json の scripts に合わせてローカルサーバーを起動してください。
おめでとうございます！これでreact-animate-observerを使う準備が整いました 🎉