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> >= 7.2 202<i class="fa-brands fa-laravel fa-2xl text-red-900 mr-1 ml-4"></i> <strong>Laravel</strong> >= 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">-></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">-></span><span class="nf">showDenyButton</span><span class="p">()</span> 286 <span class="o">-></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">-></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">-></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.