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 React hooks atau menggunakan modul eksternal.

Cara Membuat Munculan di React.js

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

1. Menggunakan React Hooks

Pendekatan hook 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 hook useState untuk membuat variabel status untuk pop-up. Anda dapat menggunakan variabel status ini untuk menentukan apakah pop-up harus dibuka atau tidak.

instagram viewer

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

Lihatlah kode untuk pendekatan ini:

impor Bereaksi, { useState } dari 'reaksi';
fungsiContoh() {
const [isOpen, setIsOpen] = useState(PALSU);


kembali (
<div>
<tombol onClick={() => setIsOpen (benar)}>
 Buka Munculan
</button>


{terbuka && (
<div>
<div>
 Ini adalah konten pop-up.
</div>
<tombol onClick={() => setIsOpen (salah)}>
 Tutup Munculan
</button>
</div>
 )}
</div>
 );
}
eksporbawaan Contoh;

Pertama, kode ini mengimpor hook useState dari library react inti. Kemudian, fungsi Contoh menggunakan hook useState untuk membuat variabel status yang disebut isOpen. Variabel status ini menentukan apakah pop-up harus dibuka atau tidak.

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:

impor ReactModal dari 'reaksi-modal';
impor Bereaksi, { useState } dari 'reaksi';
fungsiContoh() {
const [isOpen, setIsOpen] = useState(PALSU);


kembali (
<div>
<tombol onClick={setIsOpen}>Modal Terbuka</button>
<ReactModal
 isOpen={isOpen}
 label konten="Contoh Modal"
>
 Ini adalah isi modalnya.
</ReactModal>
</div>
 );
}
eksporbawaan Contoh;

Dalam kode ini, Anda masih menggunakan React hooks tetapi dengan modul react-modal. Dengan modul react-modal, Anda dapat menambahkan lebih banyak fungsi 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 alih-alih membuatnya 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 onRequestClose dari komponen react-modal. Prop ini mengambil fungsi sebagai nilainya. Fungsi ini akan berjalan ketika pengguna mengklik di luar modal.

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

impor Bereaksi, { useState } dari 'reaksi';
impor ReactModal dari 'reaksi-modal';
fungsiContoh() {
const [isOpen, setIsOpen] = useState(PALSU);


kembali (
<div>
<tombol onClick={() => setIsOpen (benar)}>
 Modal Terbuka
</button>
<ReactModal
 isOpen={isOpen}
 label konten="Contoh Modal"
 onRequestClose={() => setIsOpen(PALSU)}
>
 Ini adalah isi modalnya.
</ReactModal>
</div>
 );
}
eksporbawaan Contoh;

Fungsi yang kita berikan ke prop onRequestClose cukup menyetel variabel status isOpen ke false. Ini akan menyebabkan modal ditutup.

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

Menambahkan Styling di Pop-Up

Setelah Anda membuat pop-up, Anda mungkin ingin menambahkan beberapa gaya padanya. Ada banyak cara untuk mendesain komponen React, tetapi kita akan berfokus pada gaya inline.

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 putih dan lebar 500px ke pop-up, Anda akan menggunakan kode berikut:

impor Reaksi dari 'reaksi';
fungsiContoh() {
kembali (
<div style={{ backgroundColor: 'putih', lebar: '500px' }}>
 Ini adalah konten pop-up.
</div>
 );
}
eksporbawaan Contoh;

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 Munculan

Munculan 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 menggunakan aplikasi React Anda secara gratis di halaman GitHub.