It's sometimes important to notify a user if they have lost their internet connection. Livewire provides helpful utilities to perform actions based on a user's "offline" state.
You can show an element on the page when the user goes "offline", by adding the
<div wire:offline> You are now offline. </div>
<div> will automatically be hidden by default, and shown to the user when the browser goes offline.
class modifier allows you to add a class to an element when "offline".
Now, when the browser goes offline, the element will receive the
bg-red-300 class. The class will be removed again once the user is back online.
You can also perform the inverse, and remove classes by adding the
.remove modifier, similar to how
<div wire:offline.class.remove="bg-green-300" class="bg-green-300"></div>
bg-green-300 class will be removed from the
<div> while offline.
attr modifier allows you to add an attribute to an element when "offline".
Now, when the browser goes offline, the button will be disabled.
You can also perform the inverse, and remove attributes by adding the