Offline State

• Toggling elements
• Toggling classes
• Toggling attributes

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.

Toggling elements

You can show an element on the page when the user goes "offline", by adding the wire:offline attribute.

        
1<div wire:offline>
2    You are now offline.
3</div>    

This <div> will automatically be hidden by default, and shown to the user when the browser goes offline.

Toggling classes

Adding the class modifier allows you to add a class to an element when "offline".

        
1<div wire:offline.class="bg-red-300"></div>    

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 wire:loading works.

        
1<div wire:offline.class.remove="bg-green-300" class="bg-green-300"></div>    

The bg-green-300 class will be removed from the <div> while offline.

Toggling attributes

Adding the attr modifier allows you to add an attribute to an element when "offline".

        
1<button wire:offline.attr="disabled">Submit</button>    

Now, when the browser goes offline, the button will be disabled.

You can also perform the inverse, and remove attributes by adding the .remove modifier.