ReactVisibilitySensorを使用してコンポーネントがビューポートに入るタイミングを検出する方法

序章

Reactコンポーネントがビューポートに入るタイミングをプログラムで検出するには、イベントリスナーをスクロールし、要素のサイズを計算する必要があります。

React Visibility Sensor を使用すると、これを実現するReactコンポーネントが提供されます。

このチュートリアルでは、React Visibility Sensorを使用して、Reactコンポーネントがビューポートに入ったことを検出する方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv15.3.0、npm v6.14.9、react v17.0.1、およびreact-visibibilty-sensorv5.1.1で検証されました。

ステップ1—プロジェクトの設定

複数の画像があるページのシナリオを考えてみましょう。画像がビューポートに入るときに、CSSトランジションを適用して、画像がフェードインするようにします。これを実現するために、各画像にReactVisibilitySensorを適用します。

create-react-app を使用してReactアプリを生成し、依存関係をインストールすることから始めます。

npx create-react-app react-visibility-sensor-example

新しいプロジェクトディレクトリに移動します。

cd react-visibility-sensor-example

react-visibility-sensorパッケージをインストールします。

npm install [email protected]

これで、Reactアプリケーションを実行できます。

npm start

プロジェクトのエラーや問題を修正します。そして、Webブラウザでlocalhost:3000にアクセスします。

動作するReactアプリケーションができたら、ビューポート検出を使用してカスタムコンポーネントの構築を開始できます。

ステップ2— ReactVisibilitySensorを適用する

テキストエディタで新しいVisibilitySensorImage.jsファイルを作成します。

src / VisibilitySensorImage.js

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class VisibilitySensorImage extends Component {
  state = {
    visibility: false
  }

  render() {
    return (
      <VisibilitySensor
        onChange={(isVisible) => {
          this.setState({visibility: isVisible})
        }}
      >
        <img
          alt={this.props.alt}
          src={this.props.src}
          style={{
            display: 'block',
            maxWidth: '100%',
            width: '100%',
            height: 'auto',
            opacity: this.state.visibility ? 1 : 0.25,
            transition: 'opacity 500ms linear'
          }}
        />
      </VisibilitySensor>
    );
  }
}

export default VisibilitySensorImage;

このコンポーネントは、react-visibility-sensorによって提供されるVisibilitySensorコンポーネントを使用します。 changeイベントが検出されると、コンポーネントが表示されているかどうかを判断するためのチェックが実行されます。

このコードは、三項演算子を使用して、不透明度を0.25または1のどちらに設定するかを決定します。画像がビューポートにない場合は、0.25の不透明度が適用されます。画像がビューポートにある場合、1の不透明度が適用されます。

次に、作成した新しいコンポーネントを使用して、動作を観察します。

App.jsファイルを開き、VisibilitySensorImageを使用するように変更します。

src / App.js

import VisibilitySensorImage from './VisibilitySensorImage';

function App() {
  return (
    <div className="App">
      <h1>Astronomy</h1>
      {[
        'https://apod.nasa.gov/apod/image/2012/AntennaeGpotw1345a_1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/Neyerm63_l1_1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/2020Dec14TSE_Ribas_IMG_9291c1024.jpg',
        'https://apod.nasa.gov/apod/image/2012/ChristmasTree-ConeNebula-CumeadaObservatoryDSA-net1100.jpg',
        'https://apod.nasa.gov/apod/image/2012/EagleNebula_Paladini_960.jpg'
      ].map((imgpath) => <VisibilitySensorImage src={imgpath} alt="Astronomy Image"/>)}
    </div>
  );
}

export default App;

これで、Reactアプリケーションを実行すると、画面に表示される画像を観察する必要があります。画面を下にスクロールすると、画像の不透明度が「フェードイン」視覚効果で変化するはずです。

ただし、この例では、効果は狭い画面でのみ表示されます。画像がビューポートよりも大きい場合、isVisibleとして検出されない場合があります。ニーズに合わせて、ReactVisibilitySensorで使用できる小道具をカスタマイズできます。

ステップ3— ReactVisibilitySensorのカスタマイズ

React Visibility Sensorのドキュメントには、カスタマイズのための多くの小道具が含まれています。

partialVisibilityプロペラは、ビューポートよりも大きいコンポーネントの問題に対処するのに役立ちます。

VisibilitySensorImageに戻り、partialVisibilityを追加します。

src / VisibilitySensorImage.js

import React, { Component } from 'react';
import VisibilitySensor from 'react-visibility-sensor';

class VisibilitySensorImage extends Component {
  state = {
    visibility: false
  }

  render() {
    return (
      <VisibilitySensor
        partialVisibility
        onChange={(isVisible) => {
          this.setState({visibility: isVisible})
        }}
      >
        <img
          alt={this.props.alt}
          src={this.props.src}
          style={{
            display: 'block',
            maxWidth: '100%',
            width: '100%',
            height: 'auto',
            opacity: this.state.visibility ? 1 : 0.25,
            transition: 'opacity 500ms linear'
          }}
        />
      </VisibilitySensor>
    );
  }
}

export default VisibilitySensorImage;

ここで、ページをスクロールすると、画像が部分的にビューポートにあるときに不透明度が変化します。

partialVisibilityに加えて、多くのカスタマイズ小道具があります。

スクロールリスナーを調整します。
ビューポートに表示する最小ピクセル数を指定します（デフォルト：partialVisibilityがtrueの場合、要素は1ピクセルしか表示されない場合に表示されると見なされます）。
ブラウザウィンドウのサイズが変更されたら聞いてください。
または、イベントをリッスンする必要がなくなった場合は、スクロールリスナーを完全に非アクティブ化します。

結論

このチュートリアルでは、React Visibility Sensorを使用して、Reactコンポーネントがビューポートに入ったことを検出する方法を学習しました。

このチュートリアルの例では、画像がビューポートに出入りするときにフェードインおよびフェードアウトします。しかし、他の用途の可能性もあります。

画像が表示されているときに遅延読み込みする画像。
「ご来店ありがとうございました！」を表示しますユーザーがウェブサイトのフッターまでスクロールしたときのメッセージ。
カスタムイベントをGoogleAnalyticsに記録します。
ユーザーがブログ投稿の最後までスクロールしたときにコメントウィジェットを展開します。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。