Cara Membuat Komponen Notifikasi Khusus di React
Table of content:
Ada beberapa paket pihak ketiga yang tersedia di React yang dapat membantu Anda membuat komponen notifikasi. Namun, jika Anda hanya menginginkan komponen notifikasi sederhana, Anda mungkin ingin membuatnya sendiri untuk menghindari penambahan dependensi yang tidak perlu ke aplikasi Anda.
Menyiapkan Proyek
Anda akan menggunakan Vite untuk menyiapkan aplikasi React. Vite adalah alat build yang memungkinkan Anda membuat scaffold proyek React dengan cepat.
Untuk memulai, gunakan pengelola paket benang untuk membuat proyek Vite baru dengan menjalankan perintah di bawah ini.
Baca Juga:
yarn create vite
Perintah akan meminta Anda untuk memasukkan nama proyek. Masukkan nama proyek dan tekan Enter. Selanjutnya, Anda akan diminta untuk memilih kerangka kerja. Memilih reaksi dan tekan Enter. Terakhir, Anda akan diminta untuk memilih varian, pilih JavaScript lalu tekan Enter.
Berikut adalah konfigurasi yang akan digunakan tutorial ini:
Setelah Vite membuat proyek, arahkan ke folder proyek dan buka menggunakan editor kode.
Anda kemudian dapat memulai server pengembangan dengan menjalankan perintah berikut.
yarn dev
Ini akan membuka aplikasi React baru Anda di browser default Anda di http://localhost:5173/.
Merancang Komponen Notifikasi
Untuk membuat komponen notifikasi yang fleksibel, ia harus dapat menangani berbagai jenis notifikasi dengan berbagai judul, deskripsi, dan gaya. Misalnya, perlu membuat pemberitahuan peringatan, keberhasilan, dan kesalahan.
Berikut adalah variasi berbeda yang harus dapat dirender oleh komponen notifikasi.
Anda bisa mencapainya dengan meneruskan properti ke komponen yang menentukan jenis notifikasi yang akan dirender, judul, dan teks deskripsi. Dengan menggunakan alat peraga ini, Anda dapat menyesuaikan komponen dan menggunakannya kembali di seluruh aplikasi Anda dengan sedikit usaha. Jika Anda memerlukan penyegaran tentang props, berikut adalah artikel yang menjelaskan cara menggunakan props di React.
Membuat Komponen Notifikasi
Dalam src folder, buat file baru bernama Notification.jsx dan tambahkan kode berikut.
export default function Notification({type, title, description}) {
return (
<div>
{}
</div>
)
}
Kode ini membuat komponen fungsional yang disebut Pemberitahuan dengan tiga alat peraga: jenis, judulDan keterangan. Anda akan menggunakan properti ini untuk menyesuaikan gaya dan konten notifikasi.
Dilihat dari desainnya, komponen ini memiliki beberapa ikon yaitu informasi dan ikon silang. Anda dapat mengunduh ikon yang dapat digunakan secara gratis atau menggunakan komponen ikon dari paket seperti ikon reaksi. Tutorial ini akan digunakan ikon reaksi jadi instal dengan menjalankan perintah di bawah ini.
yarn add react-icons
Kemudian impor ikon di bagian atas Pemberitahuan komponen.
import { RxCross2, RxInfoCircled } from "react-icons/rx"
Sekarang, Anda dapat memodifikasi komponen untuk menggunakan ikon, judul, dan nilai prop deskripsi untuk membuat konten notifikasi.
export default function Notification({type, title, description}) {
return (
<div>
<div>
<RxInfoCircled/>
<div>
<div>{title}</div>
<div>{description}</div>
</div>
</div>
<RxCross2/>
</div>
)
}
Langkah selanjutnya adalah menatanya tergantung pada jenis yang diteruskan.
Salah satu pendekatan yang dapat Anda lakukan adalah menentukan kelas CSS untuk setiap jenis notifikasi yang ingin Anda tampilkan. Anda kemudian dapat menerapkan kelas yang sesuai secara kondisional berdasarkan jenis yang diteruskan.
Untuk memulai, buat file baru bernama notifikasi.css dan impor di Notification.jsx dengan menambahkan kode berikut di bagian atas.
import "./notification.css"
Lalu masuk notifikasi.css tentukan gaya dasar untuk komponen notifikasi:
.notification {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px;
}
.notification__left {
display: flex;
flex-direction: row;
padding: 0px;
gap: 8px;
margin-right: 24px;
}
.notification__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
}
.notification__title {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 14px;
}
.notification__description {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 12px;
padding: 0;
}
Anda kemudian dapat menentukan gaya untuk berbagai jenis notifikasi dengan menambahkan kode berikut di file CSS.
.notification__success {
background: #f6fef9;
border: 1px solid #2f9461;
border-radius: 8px;
}.notification__error {
background: #fffbfa;
border: 1px solid #cd3636;
border-radius: 8px;
}
.notification__warning {
background: #fffcf5;
border: 1px solid #c8811a;
border-radius: 8px;
}
Kode di atas menata wadah notifikasi berdasarkan jenis yang diteruskan.
Untuk menyesuaikan judul, gunakan gaya berikut.
.notification__title__success {
color: #2f9461;
}.notification__title__warning {
color: #c8811a;
}
.notification__title__error {
color: #cd3636;
}
Untuk teks deskripsi khusus, gunakan gaya ini.
.notification__description__success {
color: #53b483;
}.notification__description__warning {
color: #e9a23b;
}
.notification__description__error {
color: #f34141;
}
Dan untuk ikon, gunakan kelas berikut.
.notification_icon_error {
color: #cd3636;
}
.notification__icon__success {
color: #2f9461;
}.notification__icon__warning {
color: #c8811a;
}
Kemudian, di Pemberitahuan komponen, Anda dapat menerapkan kelas yang sesuai secara kondisional berdasarkan jenis penyangga, seperti ini:
export default function Notification({type, title, description}) {
return (
<div className={`notification notification__${type}`}>
<div className={`notification__left`}>
<RxInfoCircled className={`notification__icon__${type}`}/>
<div className="notification__content">
<div className={`notification__title notification__title__${type}`}>{title}</div>
<div className={`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
<RxCross2 className={`notification__icon__${type}`}/>
</div>
)
}
Dalam komponen ini, Anda mengatur kelas secara dinamis tergantung pada jenisnya seperti notifikasi__sukses atau notification__error.
Untuk melihat ini beraksi, impor komponen Notifikasi di Aplikasi.jsx dan gunakan sebagai berikut:
import Notification from './Notification'function App() {
return (
<>
<Notification
type="success"
title="Task Completed"
description="Your task has been completed successfully."
/>
</>
)
}
export default App
Sekarang, Anda dapat memberikan tipe yang berbeda ke Pemberitahuan komponen dan merender notifikasi yang sesuai yang cocok dengan pesan.
Ini penting untuk pengalaman pengguna yang baik karena pengguna datang untuk mengasosiasikan warna dan gaya yang berbeda dengan skenario yang berbeda, dan penting untuk menggunakan asosiasi tersebut secara konsisten. Misalnya, akan membingungkan untuk memberi tahu pengguna bahwa mereka berhasil mengunggah foto di kotak notifikasi berwarna merah. Mereka mungkin mengira unggahan itu gagal, padahal berhasil.
Menambahkan Interaktivitas ke Komponen Notifikasi
Anda telah mempelajari cara menggunakan properti untuk membuat komponen notifikasi yang dapat disesuaikan. Untuk melangkah lebih jauh, Anda dapat menambahkan transisi ke komponen ini agar lebih menarik. Misalnya, Anda dapat menggunakan animasi CSS untuk menggeser komponen notifikasi ke layar dan menggesernya keluar setelah durasi tertentu berlalu.
Artikel Terkait
