Cara Membuat Komponen Notifikasi Khusus di React

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

Kamu akan gunakan 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.

benang buat 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.

dev benang

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 alat peraga, 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.

eksporbawaanfungsiPemberitahuan({jenis, judul, deskripsi}) {
kembali (


 {/* Konten notifikasi */}
 </div>
 )
}

Kode ini membuat komponen fungsional yang disebut Pemberitahuan dengan tiga alat peraga: jenis, judul, Dan 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. Kamu bisa unduh ikon yang bebas digunakan atau gunakan komponen ikon dari paket seperti ikon reaksi. Tutorial ini akan digunakan ikon reaksi jadi instal dengan menjalankan perintah di bawah ini.

benang tambahkan ikon reaksi

Kemudian impor ikon di bagian atas Pemberitahuan komponen.

impor { RxCross2, RxInfoCircled } dari"ikon-reaksi/rx"

Sekarang, Anda dapat memodifikasi komponen untuk menggunakan ikon, judul, dan nilai prop deskripsi untuk membuat konten notifikasi.

eksporbawaanfungsiPemberitahuan({jenis, judul, deskripsi}) {
kembali (







{judul}</div>
{deskripsi}</div>
 </div>
 </div>

 </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.

impor "./notifikasi.css"

Lalu masuk notifikasi.css tentukan gaya dasar untuk komponen notifikasi:

.pemberitahuan {
menampilkan: melenturkan;
flex-direction: baris;
menyelaraskan-item: mulai fleksibel;
lapisan: 8px;
}
.notification__left {
menampilkan: melenturkan;
flex-direction: baris;
lapisan: 0px;
celah: 8px;
margin-kanan: 24px;
}
.notifikasi__konten {
menampilkan: melenturkan;
flex-direction: kolom;
menyelaraskan-item: mulai fleksibel;
lapisan: 0px;
}
.notification__title {
font-family: "Antar";
gaya tulisan: normal;
font-berat: 500;
ukuran huruf: 14px;
}
.notification__description {
font-family: "Antar";
gaya tulisan: normal;
font-berat: 400;
ukuran huruf: 12px;
lapisan: 0;
}

Anda kemudian dapat menentukan gaya untuk berbagai jenis notifikasi dengan menambahkan kode berikut di file CSS.

.notifikasi__sukses {
latar belakang: #f6fef9;
berbatasan: 1pxpadat#2f9461;
radius perbatasan: 8px;
}
.notification__error {
latar belakang: #fffbfa;
berbatasan: 1pxpadat#cd3636;
radius perbatasan: 8px;
}
.notification__warning {
latar belakang: #ffffcf5;
berbatasan: 1pxpadat#c8811a;
radius perbatasan: 8px;
}

Kode di atas menata wadah notifikasi berdasarkan jenis yang diteruskan.

Untuk menyesuaikan judul, gunakan gaya berikut.

.notifikasi__judul__sukses {
warna: #2f9461;
}
.notification__title__warning {
warna: #c8811a;
}
.notification__title__error {
warna: #cd3636;
}

Untuk teks deskripsi khusus, gunakan gaya ini.

.pemberitahuan__deskripsi__sukses {
warna: #53b483;
}
.notification__description__warning {
warna: #e9a23b;
}
.notification__description__error {
warna: #f34141;
}

Dan untuk ikon, gunakan kelas berikut.

.notification_icon_error {
warna: #cd3636;
}
.notifikasi__icon__sukses {
warna: #2f9461;
}
.notification__icon__warning {
warna: #c8811a;
}

Kemudian, di Pemberitahuan komponen, Anda dapat menerapkan kelas yang sesuai secara kondisional berdasarkan jenis penyangga, seperti ini:

eksporbawaanfungsiPemberitahuan({jenis, judul, deskripsi}) {
kembali (
`pemberitahuan____${jenis}`}>
`pemberitahuan__kiri`}>
`pemberitahuan__ikon__${jenis}`}/>
"pemberitahuan__konten">
`pemberitahuan__judul pemberitahuan__judul__${jenis}`}>{judul}</div>
`pemberitahuan_keterangan_pemberitahuan__keterangan__${jenis}`}>{deskripsi}</div>
 </div>
 </div>
`pemberitahuan__ikon__${jenis}`}/>
 </div>
 )
}

Dalam komponen ini, Anda secara dinamis menyetel kelas tergantung pada jenisnya seperti notifikasi__sukses atau notification__error.

Untuk melihat ini beraksi, impor komponen Notifikasi di Aplikasi.jsx dan gunakan sebagai berikut:

impor Pemberitahuan dari'./Pemberitahuan'
fungsiAplikasi() {
kembali (
 <>
 jenis="kesuksesan"
 judul="Tugas selesai"
 deskripsi="Tugas Anda telah berhasil diselesaikan."
 />
 </>
 )
}
eksporbawaan Aplikasi

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.