Pustaka SweetAlert memudahkan pembuatan komponen notifikasi yang disesuaikan di React.

SweetAlert adalah pustaka populer yang memberi Anda kemampuan untuk membuat komponen notifikasi yang disesuaikan untuk aplikasi React Anda. Anda dapat menggunakan notifikasi untuk memberi tahu pengguna tentang informasi penting, kesalahan, atau tindakan yang berhasil dalam aplikasi Anda. Ini menambah pengalaman pengguna yang luar biasa.

Menginstal Perpustakaan SweetAlert

Untuk menggunakan SweetAlert perpustakaan untuk membuat notifikasi, Anda perlu menginstalnya menggunakan pengelola paket pilihan Anda.

Anda dapat menginstalnya melalui Manajer paket NPM dengan menjalankan perintah berikut di terminal Anda:

npm instal sweetalert --save

Menggunakan SweetAlert untuk Membuat Notifikasi

Membuat notifikasi khusus di aplikasi React Anda menggunakan pustaka SweetAlert mirip dengan menggunakan perpustakaan Toastify. Itu swal fungsi yang disediakan oleh pustaka SweetAlert membuat turunan dari komponen notifikasi dan menentukan properti notifikasi.

instagram viewer

Berikut adalah contoh penggunaan the swal() berfungsi untuk membuat komponen notifikasi:

impor Reaksi dari'reaksi'
impor swal dari'peringatan manis'
fungsiAplikasi() {


const beri tahu = () => swal('Halo yang disana');


kembali (






eksporbawaan Aplikasi

Mengklik tombol akan memanggil swal fungsi, yang akan menampilkan notifikasi dengan pesan "Hello There".

Itu swal fungsi mengambil tiga parameter. Parameter pertama adalah judul notifikasi, parameter kedua adalah pesan, dan yang ketiga adalah ikon untuk ditampilkan di notifikasi Anda.

Anda dapat mengatur ikon parameter ke salah satu nilai yang telah ditentukan yaitu, kesuksesan, peringatan, kesalahan, atau info. Ikon notifikasi kemudian akan didasarkan pada nilai yang Anda berikan.

Misalnya:

impor Reaksi dari'reaksi'
impor swal dari'peringatan manis'
fungsiAplikasi() {


const beri tahu = () => swal('Halo yang disana', 'Selamat Datang di halamanku', 'kesuksesan');


kembali (






eksporbawaan Aplikasi

Ketika pengguna mengklik tombol, itu memanggil memberitahu fungsi. Fungsi ini kemudian akan menampilkan notifikasi dengan pesan "Hello There" dan "Welcome to my Page" dengan ikon sukses.

Alternatif untuk menggunakan swal fungsi dengan tiga parameter akan menggunakan swal fungsi dengan parameter objek. Parameter objek ini berisi properti yang menentukan komponen notifikasi.

Misalnya:

impor Reaksi dari'reaksi'
impor swal dari'peringatan manis'
fungsiAplikasi() {


const beri tahu = () => swal(
 {
 judul: 'Halo yang disana',
 teks: 'Selamat Datang di halamanku',
 ikon: 'kesuksesan',
 tombol: 'OKE',
 }
 );


kembali (






eksporbawaan Aplikasi

Di blok kode di atas, file swal fungsi mengambil objek dengan properti berikut: judul, teks, ikon, Dan tombol.

Itu judul properti menentukan judul notifikasi, sedangkan properti teks properti mendefinisikan pesan. Dengan ikon properti, Anda dapat menentukan jenis ikon yang ditampilkan dalam notifikasi.

Terakhir, the tombol properti menentukan teks tombol yang ditampilkan dalam notifikasi. Dalam hal ini, tombol menampilkan teks OKE.

Menyesuaikan Properti Tombol

Anda dapat menyesuaikan tombol milik komponen notifikasi Anda agar sesuai dengan kebutuhan desain Anda. Itu tombol properti mengambil objek dengan properti yang digunakan untuk mengonfigurasi perilaku dan tampilan tombol.

Tombol default berisi properti berikut:

swal(
 {
 tombol: {
 teks: "OKE",
 nilai: BENAR,
 bisa dilihat: BENAR,
 nama kelas: "",
 closeModal: BENAR
 },
 }
 );

Di blok kode di atas, properti berikut digunakan dengan tombol:

  • teks: Teks yang akan ditampilkan pada tombol.
  • nilai: Nilai yang dikembalikan saat pengguna mengklik tombol. Dalam hal ini, nilainya adalah BENAR.
  • bisa dilihat: Nilai boolean menunjukkan apakah tombol harus terlihat.
  • nama kelas: Sebuah string yang mewakili kelas CSS untuk diterapkan ke tombol.
  • closeModal: Nilai boolean yang menunjukkan apakah modal harus ditutup saat tombol diklik.

Anda juga dapat membuat lebih dari satu tombol menggunakan array dengan tombol Properti. Array akan mengambil string sebagai elemennya.

Misalnya:

swal(
 {
 tombol: ["Membatalkan", "Oke"],
 }
 );

Dalam contoh ini, komponen notifikasi Anda akan berisi dua tombol dengan teks ' membatalkan Dan Oke. Mengatur tombol properti untuk PALSU akan membuat notifikasi tanpa tombol.

Merender Elemen HTML Di Dalam Komponen Notifikasi

Anda juga dapat merender elemen HTML selain dari string biasa sebagai notifikasi. Ini menyediakan berbagai opsi penyesuaian.

Misalnya:

impor Reaksi dari'reaksi'
impor swal dari'peringatan manis'
fungsiAplikasi() {


const beri tahu = () => swal(
 {
 isi: {
 elemen: 'memasukkan',
 atribut: {
 pengganti: 'Nama depan',
 jenis: 'teks'
 }
 },
 tombol: 'Mendaftar'
 }
 )


kembali (


"aplikasi">


eksporbawaan Aplikasi

Dalam contoh ini, Anda menggunakan isi properti untuk merender bidang input dengan teks placeholder.

Anda menentukan konten notifikasi menggunakan isi properti dan elemen HTML untuk dirender dengan elemen Properti. Untuk menentukan atribut elemen HTML, Anda menggunakan atribut Properti.

Blok kode di atas akan menampilkan notifikasi di bawah ini saat Anda mengeklik elemen tombol.

Menata Komponen Notifikasi

Daripada mengikuti gaya kotak notifikasi default yang disediakan oleh pustaka SweetAlert, Anda dapat menyesuaikan tampilan kotak notifikasi dengan menerapkan gaya CSS Anda sendiri.

Anda akan menggunakan nama kelas properti untuk menambahkan gaya Anda ke notifikasi. Itu nama kelas properti mendefinisikan kelas CSS untuk notifikasi.

Misalnya:

swal(
 {
 judul: 'Halo yang disana',
 teks: 'Selamat Datang di halamanku',
 tombol: PALSU,
 nama kelas: 'peringatan',
 }
 )

Notifikasi pada blok kode di atas memiliki a nama kelas nilai peringatan. Setelah membuat notifikasi dan menentukan nama kelas, Anda akan menentukan gaya CSS Anda:

.peringatan{
warna latar belakang: hijau;
font-family: kursif;
radius perbatasan: 15px;
}

Gaya CSS di atas akan diterapkan pada notifikasi saat render:

Menutup Komponen Notifikasi

Pustaka SweetAlert menyediakan beberapa opsi untuk menyesuaikan cara notifikasi Anda ditutup. Pilihan ini adalah closeOnEsc, closeOnClickOutside, Dan timer properti.

Itu closeOnEsc properti menentukan apakah kotak notifikasi ditutup saat pengguna menekan tombol Esc pada keyboard mereka. Itu closeOnEsc properti mengambil nilai boolean.

swal(
 {
 ...,
 tutupOnEsc: PALSU,
 }
 )

Secara default, closeOnEsc properti diatur ke BENAR. Di blok kode di atas, Anda menyetel closeOnEsc properti untuk PALSU. Dengan mengatur properti ke PALSU, pengguna tidak dapat menutup kotak notifikasi dengan menekan tombol Esc.

Anda juga dapat menentukan apakah pengguna dapat menutup kotak notifikasi dengan mengklik di luar kotak menggunakan closeOnClickOutside Properti.

Jika properti diatur ke BENAR, itu closeOnClickOutside properti memungkinkan penutupan kotak notifikasi dengan mengklik di mana saja di luarnya. Ini adalah perilaku default dari SweetAlert. Untuk menghentikan perilaku ini, atur closeOnClickOutside properti untuk PALSU.

swal(
 {
 ...,
 closeOnClickOutside: PALSU,
 }
 )

Dengan timer properti, Anda dapat mengatur batas waktu agar kotak notifikasi menutup sendiri secara otomatis. Itu timer properti mengambil nilai integer dalam milidetik.

swal(
 {
 ...,
 pengatur waktu: 5000,
 }
 )

Dalam contoh ini, timer properti diatur ke 5000. Notifikasi hanya akan terlihat selama 5 detik.

Notifikasi Khusus yang Efisien Menggunakan SweetAlert

SweetAlert adalah perpustakaan yang kuat yang dapat digunakan untuk membuat notifikasi yang disesuaikan dalam aplikasi React. Menggunakan perpustakaan swal fungsi, Anda sekarang dapat membuat notifikasi dengan properti dan perilaku khusus. Anda juga dapat menggunakan pustaka lain seperti React-Toastify untuk membuat peringatan khusus dalam aplikasi React.