Mempercantik Alert React JS Dengan Sweet Alert

Assalamualaikum Warahmatullahi Wabarakatuh

Sebelum membahas mengenai React JS dan Sweet Alert, apakah Anda belum begitu familiar dengan React JS?

React JS adalah sebuah library(pustaka) javascript yang bersifat open source untuk membangun User Interface (UI) yang dibuat oleh Facebook.

Keberadaan React JS sangatlah penting. Khususnya bilamana Anda ingin membuat User Interface(UI) website yang menarik.

Dengan segala kekayaan fitur yang disediakan React JS, ada satu hal yang sedikit mengganjal. Yaitu perintah alert pada React JS yang tampilannya yang klasik atau sangat sederhana. Padahal alert adalah sesuatu yang cukup penting, karena biasa digunakan untuk menampilkan pesan kepada pengguna(user) secara interaktif. Maka jika alert pada aplikasi kita tampilannya kurang menarik, dapat mempengaruhi user experience secara keseluruhan terhadap aplikasi kita nantinya.

So, bagaimana cara mempercantik alert pada React JS?

Yap, Jawabannya adalah: ada banyak. Kita bisa membuat sendiri popup menu from scratch (ngoding manual/dari awal), atau bisa menggunakan modal dari framework bootstrap, dan masih banyak lagi. Tapi, pada kesempatan kali ini, kita akan menggunakan Sweet Alert.

Biasanya React JS menginstal package dari package manager, untuk digunakan dalam aplikasi. Jadi, package manager yang paling banyak digunakan adalah NPM seperti yang Anda ketahui. Di sini saya juga akan menggunakannya untuk menginstall sweet alert.

Buka cmd atau terminal kemudian masuk ke direktori project anda, lalu ketik

$ npm install sweetalert

lalu import ke aplikasi anda

import swal from ‘sweetalert’;

Jika sudah, maka kalian sudah dapat menggunakannya.

Memunculkan Alert

untuk menampilkan alert kalian bisa menampilkan fungsi berikut

swal({
title: "Good job!",
text: "You clicked the button!",
icon: "success",
button: "Ok",
});

Berikut hasilnya

berikut adalah penjelasan dari setiap argumen diatas:
1. argumen pertama: berisi tentang judul dari alert
2. argumen kedua: berisi tentang text dari alert
3. argumen ketiga: berisi icon dari alert kita, sweet alert menyediakan 4 icon yaitu “info”, “error”, “success”, dan “error”
4. argumen keempat: untuk menambahkan tombol pada alert

Apakah itu saja? tidak, lebih lengkapnya kalian bisa liat dokumentasinya di bawah ini.

SweetAlert

Studi Kasus Sweet Alert Pada Project React JS

Disini saya akan mengimplementasikannya ke project latihan CRUD saya, karena bermain dengan CRUD adalah suatu hal yang akan sering kali kita hadapi, kalian dapat mendownload project saya di sini (github).

abdulaziz27/ReactJsSweetAlert

Saya tidak akan membahas mengenai yang lainnya dulu, saya hanya akan fokus ke bagaimana cara menggunakan fungsi sweet alert ke react js.
berikut yang akan saya lakukan:
1. membuat tombol delete.
2. membuat function delete data dan jika diklik maka akan muncul alert berupa dialog.

Berikut function deletenya

onDelete = (event) => {
event.preventDefault()
const hapus_id = event.target.value
const url = `${config.api_host}/users/hapus/${hapus_id}`
Axios
.get(url)
.then(response => {
this.handlerAdd()
swal({
title: "Yakin ingin menghapusnya?",
text: "Sekali delete, Data Anda tidak akan bisa kembali lagi!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Ok! Data sudah terhapus secara permanen!", {
icon: "success",});
} else {
swal("Data Aman!");
}
});
})
.catch(error => {
console.log('Gagal', error);
})
}

Ketika tombol delete dipencet akan muncul alert berikut

Jika pilih Ok maka

Jika pilih Cancel maka

Nah bagaimana? bagus dan mudah kan? Coba kalian terapkan ke dalam UI kalian, karena ini akan sangat menarik dan informatif untuk meningkatkan user experience.

Ok, mungkin ini saja dari saya pembahasan mengenai sweet alert dan react js, semoga dapat membantu kalian semua.

Assalamualaikum Warahmatullahi Wabarakatuh