Cara Membuat Komponen Notifikasi Khusus di React Menggunakan SweetAlert
Table of content:
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:
Baca Juga:
npm install sweetalert --save
Menggunakan SweetAlert untuk Membuat Notifikasi
Membuat notifikasi khusus di aplikasi React Anda menggunakan pustaka SweetAlert mirip dengan menggunakan pustaka Toastify. Itu swal fungsi yang disediakan oleh pustaka SweetAlert membuat turunan dari komponen notifikasi dan menentukan properti notifikasi.
Berikut adalah contoh penggunaan the swal() berfungsi untuk membuat komponen notifikasi:
import React from 'react'
import swal from 'sweetalert'function App() {
const notify = () => swal('Hello There');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
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, kesalahanatau info. Notifikasi ikon kemudian akan didasarkan pada nilai yang Anda berikan.
Misalnya:
import React from 'react'
import swal from 'sweetalert'function App() {
const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
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:
import React from 'react'
import swal from 'sweetalert'function App() {
const notify = () => swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
icon: 'success',
button: 'OK',
}
);
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Di blok kode di atas, file swal fungsi mengambil objek dengan properti berikut: judul, teks, ikonDan 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(
{
button: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
},
}
);
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(
{
buttons: ["Cancel", "Ok"],
}
);
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:
import React from 'react'
import swal from 'sweetalert'function App() {
const notify = () => swal(
{
content: {
element: 'input',
attributes: {
placeholder: 'First Name',
type: 'text'
}
},
buttons: 'Sign Up'
}
)
return (
<div className="app">
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
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(
{
title: 'Hello There',
text: 'Welcome to my Page',
button: false,
className: 'alert',
}
)
Notifikasi pada blok kode di atas memiliki a nama kelas nilai peringatan. Setelah membuat notifikasi dan menentukan nama kelasAnda akan menentukan gaya CSS Anda:
.alert{
background-color: green;
font-family: cursive;
border-radius: 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, closeOnClickOutsideDan 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(
{
...,
closeOnEsc: false,
}
)
Secara default, closeOnEsc properti diatur ke BENAR. Di blok kode di atas, Anda menyetel closeOnEsc properti untuk PALSU. Dengan mengatur properti ke PALSUpengguna 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 BENARitu 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: false,
}
)
Dengan timer properti, Anda dapat mengatur batas waktu agar kotak notifikasi menutup sendiri secara otomatis. Itu timer properti mengambil nilai integer dalam milidetik.
swal(
{
...,
timer: 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.
Artikel Terkait
