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