PageSourceSearch

https://php-flasher.github.io/livewire/

html php-flasher.github.io collected 2026-10-03 09:45:34 UTC 21,418 bytes, 363 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="scroll-smooth">
3    <head>
4        <meta charset="utf-8"/>
5<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6<meta name="viewport" content="width=device-width, initial-scale=1"/>
7
8<title>Livewire | PHPFlasher</title>
9
10<meta property="og:title" content="Easily add flash messages to your #Laravel or #Symfony projects with PHPFlasher - a powerful, easy-to-use package for improved user engagement & experience">
11<meta property="og:type" content="website">
12<meta property="og:url" content="https://php-flasher.io">
13<meta property="og:image" content="https://php-flasher.io/dist/images/php-flasher-social-card.jpg">
14<meta property="og:image:alt" content="Easily add flash messages to your #Laravel or #Symfony projects with PHPFlasher - a powerful, easy-to-use package for improved user engagement & experience" />
15<meta property="og:image:width" content="1024">
16<meta property="og:image:height" content="512">
17<meta property="og:description" content="PHPFlasher - A powerful & easy-to-use package for adding flash messages to Laravel or Symfony projects. Provides feedback to users, improves engagement & enhances user experience. Intuitive design for beginners & experienced developers. A reliable, flexible solution.">
18<meta property="og:site_name" content="PHPFlasher">
19<meta property="og:locale" content="en_US" />
20
21<meta name="twitter:card" content="summary_large_image" />
22<meta name="twitter:creator" content="@yoeunes">
23<meta name="twitter:site" content="@phpflasher" />
24<meta name="twitter:image:src" content="https://php-flasher.io/dist/images/php-flasher-social-card.jpg" />
25<meta name="twitter:image:alt" content="PHPFlasher - A powerful & easy-to-use package for adding flash messages to Laravel or Symfony projects. Provides feedback to users, improves engagement & enhances user experience. Intuitive design for beginners & experienced developers. A reliable, flexible solution." />
26<meta name="twitter:title" content="Easily add flash messages to your #Laravel or #Symfony projects with PHPFlasher - a powerful, easy-to-use package for improved user engagement & experience">
27<meta name="twitter:description" content="PHPFlasher - A powerful & easy-to-use package for adding flash messages to Laravel or Symfony projects. Provides feedback to users, improves engagement & enhances user experience. Intuitive design for beginners & experienced developers. A reliable, flexible solution.">
28
29<meta name="publish_date" property="og:publish_date" content="2023-01-10">
30
31<meta name="author" content="Younes KHOUBZA">
32<meta name="description" content="Easily add flash notification messages to your Livewire application with PHPFlasher. Follow our step-by-step guide to install and use the library in your project, and start engaging and informing your users with powerful flash messages." />
33
34<link rel="icon" type="image/png" href="/dist/images/favicon.ico"/>
35<link rel="apple-touch-icon" sizes="180x180" href="/dist/images/apple-touch-icon.png">
36<link rel="icon" type="image/png" sizes="32x32" href="/dist/images/favicon-32x32.png">
37<link rel="icon" type="image/png" sizes="16x16" href="/dist/images/favicon-16x16.png">
38<link rel="mask-icon" href="/dist/images/safari-pinned-tab.svg" color="#5bbad5">
39<meta name="theme-color" content="#4052B5">
40
41<link href="https://fonts.googleapis.com/css?family=Raleway|Varela+Round" rel="stylesheet"/>
42
43
44    <link href="/dist/717.caca1364.css" rel="stylesheet"/>
45
46    <link href="/dist/main.35f80290.css" rel="stylesheet"/>
47
48
49
50    
50<script defer src="/dist/runtime.dc3bc6ee.js"></script>
50
51
52    
52<script defer src="/dist/624.8c0ba905.js"></script>
52
53
54    
54<script defer src="/dist/538.bb33394a.js"></script>
54
55
56    
56<script defer src="/dist/339.51258c69.js"></script>
56
57
58    
58<script defer src="/dist/main.7a7a2620.js"></script>
58
59
60
61
62
63    
64
65    
65<script src="https://cdn.counter.dev/script.js" data-id="3772fc72-0949-47c9-b4e3-6e1da76a2095" data-utcoffset="1"></script>
vendor: 68 bytes, lines 65-66
65
66    <script async src="https://www.googletagmanager.com/gtag/js?id=
66G-T4D78SM7TC
vendor: 16 bytes, lines 66-67
66"></script>
67    
67<script defer>
68        
vendor: 176 bytes, lines 68-75
68window.dataLayer = window.dataLayer || [];
69
70        function gtag() {
71            dataLayer.push(arguments);
72        }
73
74        gtag('js', new Date());
75        gtag('config', '
75G-T4D78SM7TC
vendor: 8 bytes, lines 75-76
75');
76    
76</script>
76
77
78
79<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css">
80<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
vendor: 1 bytes, line 80
80
81<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/autoloader/prism-autoloader.min.js"></script>
81
82
83<script>
84    var messages = {};
85</script>
85
86
87    </head>
88    <body class="min-h-screen min-w-full leading-normal bg-gray-50 overflow-x-hidden">
89        
90
91
92        <div class="h-16 z-10 top-0 w-screen bg-white border-b border-indigo-200 shadow">
93            <div id="header-logo" class="lg:container lg:mx-auto px-4 py-2">
94                <div class="flex items-center flex-no-shrink pt-1">
95                    <a href="/" class="flex items-center">
96                        <span class="pr-2 font-normal font-normal leading-none text-3xl text-indigo-900 hidden sm:block">
97                            <img class="fill-current h-8 mr-2" src="/dist/images/php-flasher-logo.svg" />
98                            <sup class="text-xs relative text-grey-dark" style="top: -20px;">1.13</sup>
99                        </span>
100                    </a>
101                    <div class="flex-grow"></div>
102                    <a href="#" id="menu-toggle" class="block lg:hidden h-8 w-8 border p-1 border-transparent text-gray-200 hover:text-grey menu-closed">
103                        <svg class="menu-closed:shown fill-current h-full w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
104                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
105                        </svg>
106                        <svg class="menu-closed:hidden fill-current h-full w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
107                            <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/>
108                        </svg>
109                    </a>
110                </div>
111            </div>
112        </div>
113
114        <main class="lg:container lg:mx-auto lg:px-6 flex">
115            <nav id="main-navigation" class="sticky top-4 hidden lg:block h-full w-full mx-10 lg:w-40">
116                
117                    <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4"><i class="fa-duotone fa-rocket"></i> Getting Started</h4>
118                    <ul class="list-reset mb-8">
119                        
120                            <li class="px-6 rounded">
121                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/"><i class="fa-duotone fa-book text-indigo-900 mr-1 fa-lg"></i> Introduction</a>
122                            </li>
123                        
124                            <li class="px-6 rounded">
125                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/symfony/"><i class="fa-brands fa-symfony fa-lg text-black mr-1"></i> Symfony</a>
126                            </li>
127                        
128                            <li class="px-6 rounded">
129                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/laravel/"><i class="fa-brands fa-laravel fa-lg text-red-900 mr-1"></i> Laravel</a>
130                            </li>
131                        
132                            <li class="bg-indigo-500 px-6 rounded">
133                                <a class="leading-loose text-md inline-block w-full text-white" href="/livewire/"><i class="fa-duotone fa-ghost fa-lg text-pink-800 mr-1"></i> Livewire</a>
134                            </li>
135                        
136                            <li class="px-6 rounded">
137                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/inertia/"><i class="fa-duotone fa-angles-right fa-lg text-indigo-900 mr-1"></i> Inertia</a>
138                            </li>
139                        
140                    </ul>
141                
142                    <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4"><i class="fa-duotone fa-plug"></i> libraries</h4>
143                    <ul class="list-reset mb-8">
144                        
145                            <li class="px-6 rounded">
146                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/library/notyf/"><i class="fa-duotone fa-info-circle text-indigo-900 mr-1 fa-lg"></i> Notyf</a>
147                            </li>
148                        
149                            <li class="px-6 rounded">
150                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/library/noty/"><i class="fa-duotone fa-bell text-indigo-900 mr-1 fa-lg"></i> Noty</a>
151                            </li>
152                        
153                            <li class="px-6 rounded">
154                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/library/toastr/"><i class="fa-duotone fa-bread-loaf text-indigo-900 mr-1 fa-lg"></i> Toastr</a>
155                            </li>
156                        
157                            <li class="px-6 rounded">
158                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/library/sweetalert/"><i class="fa-duotone fa-exclamation-circle text-indigo-900 mr-1 fa-lg"></i> Sweetalert</a>
159                            </li>
160                        
161                            <li class="px-6 rounded">
162                                <a class="leading-loose text-md inline-block w-full text-gray-900" href="/library/pnotify/"><i class="fa-duotone fa-exclamation-triangle text-indigo-900 mr-1 fa-lg"></i> Pnotify</a>
163                            </li>
164                        
165                    </ul>
166                
167            </nav>
168            <article id="main-article" class="flex-1 px-2 lg:px-10 py-5 w-full overflow-x-auto">
169                <div class="border-b border-grey-lighter py-3 mb-3 hidden sm:block">
170                    <div class="prev-next text-sm flex flex-row items-center sm:flex-row w-full flex-1">
171    <a class="link-previous hidden sm:hidden previous-link sm:flex items-center align-middle text-grey-darker hover:text-red" href="./">
172        <i class="fa-duotone fa-arrow-circle-left inline-block mr-1 sm:mr-2"></i>
173        <span class="label"></span>
174    </a>
175    <span class="flex-1 sm:flex-1 block h-3"></span>
176    <a class="link-next hidden sm:hidden previous-next sm:flex items-center align-middle text-grey-darker hover:text-red" href="./">
177        <span class="label"></span>
178        <i class="fa-duotone fa-arrow-circle-right inline-block ml-2 sm:ml-2"></i>
179    </a>
180</div>
181
182                </div>
183
184                <blockquote>
185                  <p>
186                      If you find <strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> useful,
187                      we would greatly appreciate your support in the form of a <strong>star</strong> rating ⭐
188                      on <a href="https://github.com/php-flasher/php-flasher"><i class="fab fa-github text-black"></i> GitHub</a>
189                      or by sharing the project on Twitter <a href="http://twitter.com/share?text=I%20really%20like%20this%20nice%20PHP%20package%2C%20that%20allows%20you%20to%20implement%20flash%20notifications%20in%20your%20app%20fast%20%F0%9F%9A%80%0A%0A%E2%86%92%20https%3A%2F%2Fphp-flasher.io%20by%20%40yoeunes%0A%0A%23php%20%23laravel%20%23symfony%20%23opensource"><i class="fab fa-twitter"></i> click here</a>.
190                      Your feedback helps us keep the package up-to-date and well-maintained. <strong>Thank you</strong> <i class="fa-solid fa-heart text-red-600"></i>
191                  </p>
192                </blockquote>
193
194                <hr>
195
196                <p><strong><span class="text-indigo-900">PHP<span class="text-indigo-500">Flasher</span></span></strong> offers a solid integration with Livewire v2.</p>
197
198<h2 id="-requirements"><i class="fa-duotone fa-list-radio"></i> Requirements</h2>
199
200<blockquote>
201  <p><i class="fa-brands fa-php fa-2xl text-blue-900 mr-1 mb-1"></i> <strong>PHP</strong> &gt;= 7.2
202<i class="fa-brands fa-laravel fa-2xl text-red-900 mr-1 ml-4"></i> <strong>Laravel</strong> &gt;= 7.0</p>
203</blockquote>
204
205<hr />
206
207<h2 id="-installation"><i class="fa-duotone fa-list-radio"></i> Installation</h2>
208
209<p>Please follow the same installation steps as for the <a href="/docs/framework/laravel">Laravel Installation</a> package.</p>
210
211<hr />
212
213<h2 id="-usage"><i class="fa-duotone fa-list-radio"></i> Usage</h2>
214
215<p>Dispatch <code class="language-plaintext highlighter-rouge">notifications</code> from your components</p>
216
217<script type="text/javascript">
218    messages["#/ livewire"] = {
219        handler: "",
220        type: "info",
221        message: "Your account has been linked and a confirmation email has been sent.",
222        title: "",
223        options: JSON.parse('{}'),
224    };
225</script>
225
226
227<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#/ livewire</span>
228
229<span class="kn">namespace</span> <span class="nn">App\Http\Livewire</span><span class="p">;</span>
230
231<span class="kn">use</span> <span class="nc">Livewire\Component</span><span class="p">;</span>
232
233<span class="kd">class</span> <span class="nc">MyComponent</span> <span class="kd">extends</span> <span class="nc">Component</span>
234<span class="p">{</span>
235    <span class="k">public</span> <span class="k">function</span> <span class="n">save</span><span class="p">()</span>
236    <span class="p">{</span>
237        <span class="nf">flash</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">addInfo</span><span class="p">(</span><span class="s1">'Your account has been linked and a confirmation email has been sent.'</span><span class="p">);</span>
238    <span class="p">}</span>
239
240    <span class="k">public</span> <span class="k">function</span> <span class="n">render</span><span class="p">()</span>
241    <span class="p">{</span>
242        <span class="k">return</span> <span class="nf">view</span><span class="p">(</span><span class="s1">'livewire.my_component'</span><span class="p">);</span>
243    <span class="p">}</span>
244</code></pre></div></div>
245
246<hr />
247
248<h2 id="-events"><i class="fa-duotone fa-list-radio"></i> Events</h2>
249
250<p>For sweetalert you can listen to <strong>Confirmed</strong>, <strong>Denied</strong> and <strong>Dismissed</strong> from withing you component</p>
251
252<script type="text/javascript">
253    messages["#/ livewire events"] = {
254        handler: "sweetalert",
255        type: "info",
256        message: "confirm or deny action",
257        options: { 
258            showDenyButton: true,
259            preConfirm: function() {
260                toastr.success('sweetalert was confirmed');
261            },
262            preDeny: function() {
263                toastr.error('sweetalert was denied');
264            },
265        },
266    };
267</script>
267
268
269<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#/ livewire events</span>
270
271<span class="kn">namespace</span> <span class="nn">App\Http\Livewire</span><span class="p">;</span>
272
273<span class="kn">use</span> <span class="nc">Livewire\Component</span><span class="p">;</span>
274
275<span class="kd">class</span> <span class="nc">MyComponent</span> <span class="kd">extends</span> <span class="nc">Component</span>
276<span class="p">{</span>
277    <span class="k">protected</span> <span class="nv">$listeners</span> <span class="o">=</span> <span class="p">[</span>
278        <span class="s1">'sweetalertConfirmed'</span><span class="p">,</span>
279        <span class="s1">'sweetalertDenied'</span><span class="p">,</span>
280    <span class="p">];</span>
281
282    <span class="k">public</span> <span class="k">function</span> <span class="n">delete</span><span class="p">()</span>
283    <span class="p">{</span>
284        <span class="nf">sweetalert</span><span class="p">()</span>
285            <span class="o">-&gt;</span><span class="nf">showDenyButton</span><span class="p">()</span>
286            <span class="o">-&gt;</span><span class="nf">addInfo</span><span class="p">(</span><span class="s1">'confirm or deny action'</span><span class="p">);</span>
287    <span class="p">}</span>
288
289    <span class="k">public</span> <span class="k">function</span> <span class="n">sweetalertConfirmed</span><span class="p">(</span><span class="kt">array</span> <span class="nv">$payload</span><span class="p">)</span>
290    <span class="p">{</span>
291        <span class="nf">toastr</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">addSuccess</span><span class="p">(</span><span class="s1">'sweetalert was confirmed'</span><span class="p">);</span>
292    <span class="p">}</span>
293
294    <span class="k">public</span> <span class="k">function</span> <span class="n">sweetalertDenied</span><span class="p">(</span><span class="kt">array</span> <span class="nv">$payload</span><span class="p">)</span>
295    <span class="p">{</span>
296        <span class="nf">toastr</span><span class="p">()</span><span class="o">-&gt;</span><span class="nf">addError</span><span class="p">(</span><span class="s1">'sweetalert was denied'</span><span class="p">);</span>
297    <span class="p">}</span>
298
299    <span class="k">public</span> <span class="k">function</span> <span class="n">render</span><span class="p">()</span>
300    <span class="p">{</span>
301        <span class="k">return</span> <span class="nf">view</span><span class="p">(</span><span class="s1">'livewire.my_component'</span><span class="p">);</span>
302    <span class="p">}</span>
303<span class="p">}</span>
304</code></pre></div></div>
305
306<blockquote>
307  <p>If the name of the event and the method you’re calling match, you can leave out the key. For example: <code class="language-plaintext highlighter-rouge">protected $listeners = ['sweetalertConfirmed'];</code> will call the <code class="language-plaintext highlighter-rouge">sweetalertConfirmed</code> method when the <code class="language-plaintext highlighter-rouge">sweetalertConfirmed</code> event is emitted.</p>
308</blockquote>
309
310<h3 id="-event-handlers-context"><i class="fa-duotone fa-list-radio"></i> event handlers context</h3>
311
312<p>Every listener method accept an <strong>array $data</strong> parameter which contain the following data :</p>
313
314<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">public</span> <span class="k">function</span> <span class="n">sweetalertConfirmed</span><span class="p">(</span><span class="kt">array</span> <span class="nv">$payload</span><span class="p">)</span>
315<span class="p">{</span>
316    <span class="nv">$promise</span> <span class="o">=</span> <span class="nv">$payload</span><span class="p">[</span><span class="s1">'promise'</span><span class="p">];</span>
317    <span class="nv">$envelope</span> <span class="o">=</span> <span class="nv">$payload</span><span class="p">[</span><span class="s1">'envelope'</span><span class="p">];</span>
318<span class="p">}</span>
319</code></pre></div></div>
320
321<blockquote>
322  <p><strong>
322promise</strong> : the resolved promise from <strong>sweetalert</strong>.</p>
323</blockquote>
324
325<blockquote>
326  <p><strong>envelope</strong> : the notification where the event happened.</p>
327</blockquote>
328
329
330                <div class="border-t border-grey-lighter py-3 mb-3 hidden sm:block">
331                    <div class="prev-next text-sm flex flex-row items-center sm:flex-row w-full flex-1">
332    <a class="link-previous hidden sm:hidden previous-link sm:flex items-center align-middle text-grey-darker hover:text-red" href="./">
333        <i class="fa-duotone fa-arrow-circle-left inline-block mr-1 sm:mr-2"></i>
334        <span class="label"></span>
335    </a>
336    <span class="flex-1 sm:flex-1 block h-3"></span>
337    <a class="link-next hidden sm:hidden previous-next sm:flex items-center align-middle text-grey-darker hover:text-red" href="./">
338        <span class="label"></span>
339        <i class="fa-duotone fa-arrow-circle-right inline-block ml-2 sm:ml-2"></i>
340    </a>
341</div>
342
343                </div>
344            </article>
345            <nav id="anchor-navigation" class="js-sticky hidden sticky top-4 h-full w-56">
346                <h4 class="text-sm leading-loose tracking-wide text-indigo-400 uppercase mt-4">
347                    <i class="fa-duotone fa-bars-sort"></i> Jump to
348                </h4>
349                <ul class="list-reset mb-8"></ul>
350            </nav>
351        </main>
352
353        <section class="bg-indigo-900 pt-10 pb-10">
354    <div class="max-w-xs mx-auto text-center text-md leading-loose">
355        <img src="/dist/images/younes-khoubza.jpeg" alt="Younes" class="inline rounded-full h-20 w-20 border-gray-100 border-2"/>
356        <p class="text-white">
357            <span class="text-gray-300">PHP<span class="text-gray-400">Flasher</span></span> is a project by <a class="text-indigo-300" target="_blank" href="https://www.linkedin.com/in/younes-khoubza/">Younes KHOUBZA</a>.
358        </p>
359    </div>
360</section>
361
362    </body>
363</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.