Membuat Notifikasi Menarik Dengan Toastr di React

Pemberitahuan sangat penting untuk aplikasi web apa pun karena memberikan informasi penting kepada pengguna. Daripada membangun sistem notifikasi dari awal, Anda dapat menggunakan pustaka eksternal. Toastr adalah salah satu pustaka populer untuk membuat notifikasi di aplikasi JavaScript.

Menginstal Perpustakaan Toastr

Pertama, mulailah dengan membuat aplikasi React yang akan Anda gunakan. Kamu bisa buat aplikasi React menggunakan Vite.

Setelah membuat aplikasi, instal toastr paket dalam proyek Anda dengan menjalankan perintah berikut di terminal Anda:

npm install --save toastr

Sekarang Anda telah menginstal toastr paket dan dapat menggunakannya untuk menampilkan notifikasi.

Membuat Notifikasi Menggunakan Toastr

Untuk membuat notifikasi, Anda akan menggunakan toastr fungsi. Itu toastr Fungsi ini digunakan untuk membuat dan menampilkan pesan toast. Sebelum membuat notifikasi, pastikan Anda mengimpor toastr gaya notifikasi di file CSS Anda.

@import'toastr';

Berikut adalah contoh bagaimana Anda membuat notifikasi menggunakan toastr fungsi:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Dalam contoh ini, Anda mendefinisikan a memberitahu fungsi. Itu Klik Saya tombol memanggil memberitahu berfungsi saat Anda mengkliknya. Itu memberitahu fungsi menggunakan toastr.sukses berfungsi untuk menampilkan notifikasi sukses.

Itu toastr.sukses fungsi mengambil dua argumen. Argumen pertama adalah pesan notifikasi yang dalam hal ini adalah string "Senang kau ada di sini". Argumen kedua adalah judul notifikasi, "Selamat datang".

Notifikasi yang mirip dengan gambar berikut akan muncul ketika Anda mengklik Klik Saya tombol.

Selain itu toastr.sukses fungsi, yang toastr objek menyediakan fungsi lain untuk membuat notifikasi. Fungsi lainnya adalah toastr.error, toastr.warning, Dan toastr.info. Setiap fungsi membuat notifikasi dengan warna dan ikon latar belakang yang berbeda, sehingga Anda dapat dengan mudah membedakan berbagai jenis notifikasi.

Misalnya, saat Anda menggunakan toastr.error fungsi, notifikasi Anda akan terlihat seperti ini:

Menyesuaikan Notifikasi Anda

Dengan perpustakaan Toastr, Anda tidak dapat menyesuaikan notifikasi menggunakan CSS tradisional, tidak seperti saat bekerja dengan React-Toastify. Namun, Toastr masih menyediakan opsi lain untuk menyesuaikan notifikasi. Anda dapat menggunakan opsi ini untuk menyesuaikan posisi, tampilan, dan fungsi notifikasi. Anda harus meneruskan opsi ke argumen ketiga dari toastr metode.

Ini contohnya:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Untuk menyesuaikan notifikasi, kode ini menggunakan closeButton, progressBar, waktu habis, kelas posisi, showMethod, Dan hideMethod properti dari objek pilihan. Itu closeButton properti menentukan apakah notifikasi Anda akan ditampilkan dengan tombol tutup. Itu menerima nilai boolean.

Menggunakan progressBar properti, Anda dapat menambahkan bilah kemajuan ke notifikasi. Mengatur waktu habis properti memungkinkan Anda untuk mengontrol berapa lama notifikasi akan ditampilkan. Properti ini menentukan jumlah milidetik sebelum notifikasi akan hilang secara otomatis.

Itu kelas posisi properti menentukan posisi notifikasi di layar Anda. Ia menerima delapan nilai yang telah ditentukan sebelumnya. Nilai tersebut meliputi:

• bersulang-atas-kanan: Menampilkan notifikasi di pojok kanan atas layar Anda.
• bersulang-atas-kiri: Notifikasi akan ditampilkan di sudut kiri atas layar Anda.
• bersulang-atas-tengah: Notifikasi akan muncul di tengah atas layar Anda.
• roti-kanan-bawah: Anda akan melihat notifikasi di pojok kanan bawah layar Anda.
• roti bakar-kiri bawah: Notifikasi ditempatkan di sudut kiri bawah layar Anda.
• roti bakar-bawah-tengah: Anda akan menemukan notifikasi di tengah bawah layar.
• bersulang-atas-penuh-lebar: Notifikasi muncul di bagian atas layar Anda, mengisi seluruh lebar layar.
• roti bakar-bawah-penuh-lebar: Pemberitahuan mengisi seluruh lebar layar Anda dan ditampilkan di bagian bawah.

Terakhir, the showMethod Dan hideMethod properti mengontrol animasi untuk menampilkan dan menyembunyikan notifikasi. Itu showMethod properti menentukan animasi yang digunakan untuk menampilkan notifikasi, sedangkan hideMethod properti menentukan animasi yang digunakan untuk menyembunyikan notifikasi.

Notifikasi yang ditentukan dalam blok kode di atas akan muncul di bagian tengah atas layar Anda, dengan bilah progres dan tombol tutup. Ini akan hilang setelah tiga detik dan menggunakan transisi fade-in dan fade-out untuk muncul dan menghilang.

Ini akan terlihat seperti ini.

Perhatikan bahwa Anda dapat menyesuaikan setiap notifikasi Toastr dengan satu objek opsi alih-alih menyesuaikannya satu per satu. Untuk melakukan ini, Anda akan menggunakan toastr.options Properti. Objek properti ini berisi properti penyesuaian dari semua notifikasi Toastr Anda.

Misalnya:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Contoh ini menunjukkan cara mengonfigurasi semua notifikasi agar memiliki bilah progres, tombol tutup, tampilan di kanan atas sudut layar, otomatis menutup setelah 5 detik, dan gunakan transisi fade-in dan fade-out untuk muncul dan menghilang.

Menjalankan aplikasi dan mengklik tombol akan menampilkan antarmuka yang akan terlihat seperti gambar di bawah ini.

Jadikan Notifikasi Anda Interaktif

Anda dapat membuat notifikasi Anda lebih menarik dengan menambahkan interaktivitas, seperti kemampuan untuk mengekliknya. Untuk melakukan ini, Anda menggunakan onclick Properti. Itu onclick properti adalah salah satu opsi penyesuaian yang disediakan perpustakaan Toastr. Ini menentukan fungsi yang berjalan saat Anda mengklik notifikasi, mirip dengan klik acara (salah satu pendengar acara JavaScript).

Berikut adalah contoh cara menggunakan onclick Properti:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Di blok kode di atas, opsi objek dari toastr.sukses fungsi berisi sebuah onclick Properti. Itu onclick properti memanggil toastr.clear fungsi, yang menghapus notifikasi dari layar.

Buat Notifikasi Menarik Menggunakan Toastr

Di sini, Anda belajar cara menggunakan pustaka Toastr untuk membangun notifikasi menarik untuk aplikasi React Anda. Anda menginstal Toastr, mengaturnya di aplikasi Anda, dan membuat serta menyesuaikan notifikasi Anda. Toastr adalah perpustakaan yang kuat yang dapat membantu Anda membuat notifikasi yang informatif dan menarik secara visual. Selain Toastr, kamu juga bisa mencoba library lain seperti SweetAlert, React-Toastify, atau Chakra UI.