React.js アプリにポップアップ効果を追加する

ポップアップは、ユーザーの注意を引き、重要な情報を表示する優れた方法です。確認メッセージやエラーメッセージなどに使用できます。または、それらを使用して、ページ上の要素に関する追加情報を表示することもできます。

React でポップアップを作成するには、React フックを使用する方法と外部モジュールを使用する方法の 2 つがあります。

今日のメイク動画

React.js でポップアップを作成する方法

初め、シンプルな反応アプリを作成する .その後、2 つの方法のいずれかを使用してポップアップを追加できます。 React フックまたは外部モジュールを使用できます。

1. React フックの使用

フックアプローチはより単純で、数行のコードしか必要としません。

まず、ポップアップを開く関数を作成する必要があります。この関数は、ポップアップを表示するコンポーネントで定義できます。

次に、useState フックを使用して、ポップアップの状態変数を作成する必要があります。この状態変数を使用して、ポップアップを開くかどうかを決定できます。

最後に、ポップアップをトリガーするボタンをコンポーネントに追加する必要があります。このボタンをクリックすると、状態変数が true に設定され、ポップアップが表示されます。

このアプローチのコードを見てください。

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

まず、このコードはコアの反応ライブラリから useState フックをインポートします。次に、Example 関数は useState フックを使用して、isOpen という状態変数を作成します。この状態変数は、ポップアップを開くかどうかを決定します。

携帯電話がタップされているかどうかを見分ける方法

次に、ポップアップをトリガーするボタンをコンポーネントに追加します。このボタンをクリックすると、状態変数が true に設定され、ポップアップが表示されます。

最後に、ポップアップを閉じるボタンをコンポーネントに追加します。このボタンをクリックすると、状態変数が false に設定され、ポップアップが消えます。

2. 外部モジュールの使用

外部モジュールを使用して、React でポップアップを作成することもできます。この目的で使用できる多くのモジュールが利用可能です。

人気のあるモジュールの 1 つは、react-modal です。 react-modal は、React でモーダルダイアログを作成できるシンプルで軽量なモジュールです。

react-modal を使用するには、まず npm を使用してインストールする必要があります。

npm install react-modal

react-modal をインストールしたら、React コンポーネントにインポートできます。

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

このコードでは、引き続き React フックを使用していますが、react-modal モジュールを使用しています。 react-modal モジュールを使用すると、ポップアップにさらに機能を追加できます。ご覧のとおり、コードは前のアプローチと非常によく似ています。唯一の違いは、独自のコンポーネントを作成する代わりに、react-modal の ReactModal コンポーネントを使用していることです。

まず、react-modal モジュールをインポートする必要があります。次に、ReactModal コンポーネントを使用して、ポップアップのコンテンツをラップします。 isOpen prop を使用して、モーダルを開くかどうかを決定します。

ポップアップを作成したら、追加機能を追加することができます。たとえば、ユーザーがポップアップの外側をクリックしたときにポップアップを閉じることができます。

これを行うには、react-modal コンポーネントの onRequest プロパティを使用する必要があります。この prop は、その値として関数を取ります。この関数は、ユーザーがモーダルの外側をクリックしたときに実行されます。

たとえば、ユーザーがポップアップの外側をクリックしたときにポップアップを閉じるには、次のコードを使用します。

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

onRequest prop に渡す関数は、単に isOpen 状態変数を false に設定します。これにより、モーダルが閉じます。

ReactModal コンポーネントに他の props を追加して、さらにカスタマイズすることもできます。 props の完全なリストについては、react-modal のドキュメントを参照してください。

ポップアップにスタイルを追加する

ポップアップを作成したら、スタイルを追加することができます。 React コンポーネントのスタイルを設定する方法はたくさんありますが、ここではインラインスタイルに焦点を当てます。

インラインスタイルは、React コンポーネントに直接追加できるスタイルです。インラインスタイルを追加するには、style プロパティを使用する必要があります。このプロパティはオブジェクトを値として取ります。キーはスタイルプロパティで、値はスタイル値です。

たとえば、白の背景色と幅 500px をポップアップに追加するには、次のコードを使用します。

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

このコードでは、backgroundColor プロパティと width プロパティを使用して style プロパティを div 要素に追加します。あなたもすることができます反応アプリで Tailwind CSS を使用するポップアップのスタイルを設定します。

ポップアップでコンバージョン率を上げる

ポップアップは、重要な情報をユーザーに表示することで、コンバージョン率を高めるのに役立ちます。たとえば、ポップアップを使用して割引コードや特別オファーを表示できます。ポップアップを使用して、ニュースレターのメールアドレスを収集することもできます。 React アプリにポップアップを追加することは、コンバージョン率を高める優れた方法です。

React アプリケーションを無料で GitHub ページに簡単にデプロイすることもできます。