Menggunakan component toast shadcn pada laravel 11 inertia react

date

Jun 8, 2024

slug

menggunakan-component-toast-shadcn-pada-laravel-11-inertia-react

status

Published

1. Setup Laravel dan Inertia.js

Pastikan Laravel dan Inertia.js sudah terpasang dengan benar di proyek yang kamu kerjakan.

2. Install Dependencies

Pergi ke halaman toast shadcn dan Install package toast untuk React. Sebagai contoh, kita bisa menggunakan perintah di bawah ini.

dengan menjalankan perintah ini, maka di project kamu akan muncutl sebuah ui component baru bernama toast.

3. Konfigurasi Middleware di Laravel

Buat middleware untuk menyimpan flash message di session dan mengirimkannya ke Inertia. namun jika kalian menggunakan laravel breeze kalian cukup memastikan configurasi ini apakah sudah tersedia atau tidak, jika tidak maka tinggal di tambahkan saja

Edit middleware tersebut (app/Http/Middleware/HandleInertiaRequests.php):

Tambahkan middleware ini ke app/bootstrap/app.php:

4. Set Flash Message di Controller

Atur flash message di controller. Misalnya:

5. Konfigurasi Toaster pada layout

Buat dan edit komponen layout agar toast bisa di tampilkan di seluruh halaman yang menggunakan layout terkait, contohnya disini menggunakan AuthenticatedLayout.jsx. dari laravel breeze, jika tidak menggunakan breeze maka konfigurasi layout yang kalian buat.

6. Konfigurasi React Component

Buat atau edit komponen React Anda untuk menangani flash message menggunakan toast.

7. Menggunakan Toast di Halaman React

Pastikan semua halaman yang ingin Anda tampilkan flash message menggunakan layout yang telah Anda setup di atas.

Contoh halaman:

8. Menjalankan Aplikasi

Jalankan aplikasi Anda dan uji apakah flash message ditampilkan dengan benar ketika Anda melakukan suatu aksi yang mengatur flash message di Laravel, seperti yang ditampilkan pada gambar ini,

Dengan langkah-langkah di atas, Anda bisa menampilkan flash message di Laravel menggunakan Inertia.js dan React dengan bantuan toast dari shadcn