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

投稿日: 2022-04-20 2022-10-14
タグ: React

序章

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

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

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

前提条件

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

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

このチュートリアルは、Nodev15.3.0で検証されました。 npm v6.14.9、 react v17.0.1、および react-visibibilty-sensor v5.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 react-visibility-sensor@5.1.1

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

npm start

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

動作する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;

このコンポーネントは、 VisibilitySensor によって利用可能になったコンポーネント react-visibility-sensor. いつ 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のドキュメントには、カスタマイズのための多くの小道具が含まれています。

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

再訪 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トピックページで演習やプログラミングプロジェクトを確認してください。

getdocs

13036