Tambahkan Efek Pop-Up ke Aplikasi React.js Anda

Pop-up adalah cara yang bagus untuk menarik perhatian pengguna Anda dan menampilkan informasi penting. Anda dapat menggunakannya untuk hal-hal seperti pesan konfirmasi dan pesan kesalahan. Atau Anda bisa menggunakannya untuk menampilkan informasi tambahan tentang elemen di halaman.

Di React, ada dua cara untuk membuat pop-up: menggunakan hook React atau menggunakan modul eksternal.

VIDEO MAKEUSEOF HARI INI

Cara Membuat Pop-Up di React.js

Pertama, buat aplikasi reaksi sederhana . Setelah itu, Anda dapat menambahkan pop-up menggunakan salah satu dari dua metode. Anda dapat menggunakan kait React atau modul eksternal.

1. Menggunakan React Hooks

Pendekatan kait lebih sederhana dan hanya membutuhkan beberapa baris kode.

Pertama, Anda perlu membuat fungsi yang akan membuka pop-up. Anda dapat menentukan fungsi ini di komponen yang akan menampilkan pop-up.

Selanjutnya, Anda perlu menggunakan kait useState untuk membuat variabel status untuk pop-up. Anda dapat menggunakan variabel status ini untuk menentukan apakah pop-up harus terbuka atau tidak.

Terakhir, Anda perlu menambahkan tombol ke komponen Anda yang akan memicu pop-up. Saat Anda mengklik tombol ini, atur variabel status ke true, yang akan menyebabkan pop-up muncul.

Lihatlah kode untuk pendekatan ini:

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;

Pertama, kode ini mengimpor kait useState dari pustaka reaksi inti. Kemudian, fungsi Contoh menggunakan kait useState untuk membuat variabel status yang disebut isOpen. Variabel status ini menentukan apakah pop-up harus terbuka atau tidak.

cara menyematkan game steam untuk memulai

Selanjutnya, tambahkan tombol ke komponen yang akan memicu pop-up. Saat Anda mengklik tombol ini, variabel status akan disetel ke true, yang akan menyebabkan pop-up muncul.

Terakhir, tambahkan tombol ke komponen yang akan menutup pop-up. Saat Anda mengklik tombol ini, variabel status akan disetel ke false, yang akan menyebabkan pop-up menghilang.

2. Menggunakan Modul Eksternal

Anda juga dapat membuat pop-up di React menggunakan modul eksternal. Ada banyak modul yang tersedia yang dapat Anda gunakan untuk tujuan ini.

Salah satu modul yang populer adalah react-modal. react-modal adalah modul sederhana dan ringan yang memungkinkan Anda membuat dialog modal di React.

Untuk menggunakan react-modal, Anda harus menginstalnya terlebih dahulu menggunakan npm:

npm install react-modal

Setelah Anda menginstal react-modal, Anda dapat mengimpornya ke dalam komponen React Anda:

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;

Dalam kode ini, Anda masih menggunakan kait React tetapi dengan modul react-modal. Dengan modul react-modal, Anda dapat menambahkan lebih banyak fungsionalitas ke pop-up. Seperti yang Anda lihat, kodenya sangat mirip dengan pendekatan sebelumnya. Satu-satunya perbedaan adalah Anda sekarang menggunakan komponen ReactModal dari react-modal daripada membuat sendiri.

Pertama, Anda harus mengimpor modul react-modal. Kemudian, Anda menggunakan komponen ReactModal untuk membungkus konten pop-up Anda. Gunakan prop isOpen untuk menentukan apakah modal harus terbuka atau tidak.

Setelah Anda membuat pop-up, Anda mungkin ingin menambahkan fitur tambahan ke dalamnya. Misalnya, Anda mungkin ingin menutup pop-up saat pengguna mengklik di luarnya.

Untuk melakukan ini, Anda perlu menggunakan prop onRequest dari komponen react-modal. Prop ini mengambil fungsi sebagai nilainya. Fungsi ini akan berjalan ketika pengguna mengklik di luar modal.

cara memasangkan airpod ke android

Misalnya, untuk menutup pop-up saat pengguna mengklik di luarnya, Anda akan menggunakan kode berikut:

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;

Fungsi yang kita lewati ke prop onRequest hanya menyetel variabel status isOpen ke false. Ini akan menyebabkan modal ditutup.

Anda juga dapat menambahkan props lain ke komponen ReactModal untuk menyesuaikannya lebih lanjut. Untuk daftar lengkap alat peraga, Anda dapat melihat dokumentasi react-modal.

Menambahkan Styling di Pop-Up

Setelah Anda membuat pop-up, Anda mungkin ingin menambahkan beberapa gaya ke dalamnya. Ada banyak cara untuk menata komponen React, tetapi kami akan fokus pada gaya sebaris.

Gaya sebaris adalah gaya yang dapat Anda tambahkan langsung ke komponen React. Untuk menambahkan gaya sebaris, Anda perlu menggunakan properti gaya. Properti ini mengambil objek sebagai nilainya, di mana kuncinya adalah properti gaya dan nilainya adalah nilai gaya.

Misalnya, untuk menambahkan warna latar belakang putih dan lebar 500px ke pop-up, Anda akan menggunakan kode berikut:

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;

Dalam kode ini, Anda menambahkan properti style ke elemen div dengan properti backgroundColor dan width. Anda juga bisa gunakan Tailwind CSS di aplikasi reaksi untuk menata popup Anda.

Tingkatkan Tingkat Konversi Dengan Pop-Up

Pop-up dapat membantu meningkatkan tingkat konversi dengan menampilkan informasi penting kepada pengguna. Misalnya, Anda dapat menggunakan pop-up untuk menampilkan kode diskon atau penawaran khusus. Anda juga dapat menggunakan pop-up untuk mengumpulkan alamat email untuk buletin Anda. Menambahkan pop-up ke aplikasi React Anda adalah cara yang bagus untuk meningkatkan rasio konversi.

Anda juga dapat dengan mudah men-deploy aplikasi React Anda secara gratis di halaman GitHub.