🎈

Reactでお手軽にIntersection Observerを使う

2021/06/25に公開

はじめに

スクロールに連動して要素をふわっとフェードインさせたりしたい場合など、Intersection Observer APIを利用すると実現ができますが、Reactでお手軽に実現したい時には便利なライブラリ、react-intersection-observerがおすすめです。

ライブラリのstorybookサイト

Intersection Obserber APIについて

インストール

$ yarn add react-intersection-observer

今回はアニメーションのcssもanimate.cssを利用して実装します。

https://animate.style/

$ yarn add animate.css

利用方法

オプションはかなりの数があって使い方も多様ではありますが、スクロールに合わせて要素をふわっと出したい！とうことであれば下記のような方法で簡単に実現ができます。

src/App.tsx

import React from 'react';
import { useInView } from 'react-intersection-observer';
import 'animate.css';

const App: React.VFC = () => {
  const { ref, inView } = useInView({
    // オプション
    rootMargin: '-50px', // ref要素が現れてから50px過ぎたら
    triggerOnce: true, // 最初の一度だけ実行
  });

  return (
    <div>
      <div style={{ height: '2000px', backgroundColor: 'blue' }}>contents</div>
      {/* refを与えた要素がウインドウ内に現れるとinViewがtrueになります */}
      <div ref={ref} style={{ height: '300px' }}>
        {inView && (
          <div
            className="animate__animated animate__fadeInUp"
            style={{ backgroundColor: 'yellow' }}
          >
            <p>黄色の要素が出現！</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

下にスクロールしていくと、2つ目の白い背景が現れて、50px過ぎたところで黄色の要素がふわっと出現します。

さいごに

用意されているカスタムフックを利用して簡単にスクロール連動のふわっと出現アニメを実装することができました。
他にも多数のオプションがあるのでアニメーションだけでなく様々用途に利用できそうです。

GitHubで編集を提案

はじめに

インストール

利用方法

さいごに

Discussion