|
1 | | -<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p> |
| 1 | +# SweetAlert2 + Laravel + Inertia React Demo |
2 | 2 |
|
3 | | -<p align="center"> |
4 | | -<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a> |
5 | | -<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a> |
6 | | -<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a> |
7 | | -<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a> |
8 | | -</p> |
| 3 | +A simple demo application showing how to integrate [SweetAlert2](https://sweetalert2.github.io/) with Laravel and Inertia React using the [`sweetalert2/laravel`](https://github.com/sweetalert2/sweetalert2-laravel) package. |
| 4 | + |
| 5 | +## Features |
9 | 6 |
|
10 | | -## About Laravel |
| 7 | +- 🎉 Beautiful alerts and toasts with SweetAlert2 |
| 8 | +- ⚡ Seamless Laravel + Inertia React integration |
| 9 | +- 🔄 Server-side alert triggering with client-side display |
| 10 | +- 📦 Simple todo app demonstrating the integration |
11 | 11 |
|
12 | | -Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as: |
| 12 | +## Installation |
13 | 13 |
|
14 | | -- [Simple, fast routing engine](https://laravel.com/docs/routing). |
15 | | -- [Powerful dependency injection container](https://laravel.com/docs/container). |
16 | | -- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage. |
17 | | -- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent). |
18 | | -- Database agnostic [schema migrations](https://laravel.com/docs/migrations). |
19 | | -- [Robust background job processing](https://laravel.com/docs/queues). |
20 | | -- [Real-time event broadcasting](https://laravel.com/docs/broadcasting). |
| 14 | +1. Clone the repository: |
| 15 | +```bash |
| 16 | +git clone https://github.com/sweetalert2/sweetalert2-laravel-inertia-react-demo.git |
| 17 | +cd sweetalert2-laravel-inertia-react-demo |
| 18 | +``` |
21 | 19 |
|
22 | | -Laravel is accessible, powerful, and provides tools required for large, robust applications. |
| 20 | +2. Install dependencies and set up the application: |
| 21 | +```bash |
| 22 | +composer setup |
| 23 | +``` |
23 | 24 |
|
24 | | -## Learning Laravel |
| 25 | +3. Run the development server: |
| 26 | +```bash |
| 27 | +composer dev |
| 28 | +``` |
25 | 29 |
|
26 | | -Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework. You can also check out [Laravel Learn](https://laravel.com/learn), where you will be guided through building a modern Laravel application. |
| 30 | +The application will be available at `http://localhost:8000`. |
27 | 31 |
|
28 | | -If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library. |
| 32 | +## How It Works |
29 | 33 |
|
30 | | -## Laravel Sponsors |
| 34 | +### 1. Include SweetAlert2 in Your Layout |
31 | 35 |
|
32 | | -We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com). |
| 36 | +Add the SweetAlert2 template to your Blade layout (`resources/views/app.blade.php`): |
33 | 37 |
|
34 | | -### Premium Partners |
| 38 | +```blade |
| 39 | +@include('sweetalert2::index') |
| 40 | +``` |
35 | 41 |
|
36 | | -- **[Vehikl](https://vehikl.com)** |
37 | | -- **[Tighten Co.](https://tighten.co)** |
38 | | -- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)** |
39 | | -- **[64 Robots](https://64robots.com)** |
40 | | -- **[Curotec](https://www.curotec.com/services/technologies/laravel)** |
41 | | -- **[DevSquad](https://devsquad.com/hire-laravel-developers)** |
42 | | -- **[Redberry](https://redberry.international/laravel-development)** |
43 | | -- **[Active Logic](https://activelogic.com)** |
| 42 | +### 2. Configure Inertia Middleware |
44 | 43 |
|
45 | | -## Contributing |
| 44 | +Share the SweetAlert2 session data in `HandleInertiaRequests.php`: |
46 | 45 |
|
47 | | -Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions). |
| 46 | +```php |
| 47 | +use SweetAlert2\Laravel\Swal; |
48 | 48 |
|
49 | | -## Code of Conduct |
| 49 | +public function share(Request $request): array |
| 50 | +{ |
| 51 | + return array_merge(parent::share($request), [ |
| 52 | + 'flash' => [ |
| 53 | + Swal::SESSION_KEY => fn () => $request->session()->pull(Swal::SESSION_KEY), |
| 54 | + ], |
| 55 | + ]); |
| 56 | +} |
| 57 | +``` |
50 | 58 |
|
51 | | -In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct). |
| 59 | +### 3. Trigger Alerts from Laravel |
52 | 60 |
|
53 | | -## Security Vulnerabilities |
| 61 | +Use the `Swal` facade anywhere in your Laravel controllers or routes: |
54 | 62 |
|
55 | | -If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [[email protected]](mailto:[email protected]). All security vulnerabilities will be promptly addressed. |
| 63 | +```php |
| 64 | +use SweetAlert2\Laravel\Swal; |
| 65 | + |
| 66 | +// Show a success toast after saving |
| 67 | +Swal::toastSuccess([ |
| 68 | + 'title' => 'Saved!', |
| 69 | + 'position' => 'top-end', |
| 70 | + 'showConfirmButton' => false, |
| 71 | + 'timer' => 3000, |
| 72 | + 'timerProgressBar' => true, |
| 73 | +]); |
| 74 | + |
| 75 | +return redirect('/'); |
| 76 | +``` |
| 77 | + |
| 78 | +### Available Methods |
| 79 | + |
| 80 | +```php |
| 81 | +// Alerts with icons |
| 82 | +Swal::success(['title' => 'Success!']); |
| 83 | +Swal::error(['title' => 'Error!']); |
| 84 | +Swal::warning(['title' => 'Warning!']); |
| 85 | +Swal::info(['title' => 'Info!']); |
| 86 | +Swal::question(['title' => 'Question?']); |
| 87 | + |
| 88 | +// Toast notifications |
| 89 | +Swal::toast(['title' => 'Toast']); |
| 90 | +Swal::toastSuccess(['title' => 'Success!']); |
| 91 | +Swal::toastError(['title' => 'Error!']); |
| 92 | +Swal::toastWarning(['title' => 'Warning!']); |
| 93 | +Swal::toastInfo(['title' => 'Info!']); |
| 94 | +Swal::toastQuestion(['title' => 'Question?']); |
| 95 | + |
| 96 | +// Full configuration |
| 97 | +Swal::fire([ |
| 98 | + 'title' => 'Custom Alert', |
| 99 | + 'text' => 'With custom options', |
| 100 | + 'icon' => 'success', |
| 101 | + 'confirmButtonText' => 'OK', |
| 102 | + // ...any SweetAlert2 option |
| 103 | +]); |
| 104 | +``` |
| 105 | + |
| 106 | +See the [SweetAlert2 documentation](https://sweetalert2.github.io/#configuration) for all available options. |
| 107 | + |
| 108 | +## Tech Stack |
| 109 | + |
| 110 | +- Laravel 12 |
| 111 | +- Inertia.js 2 |
| 112 | +- React 19 |
| 113 | +- Tailwind CSS 4 |
| 114 | +- SweetAlert2 |
56 | 115 |
|
57 | 116 | ## License |
58 | 117 |
|
59 | | -The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT). |
| 118 | +MIT |
0 commit comments