tanthammar / livewire-window-size
Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS
Installs: 10 724
Dependents: 0
Suggesters: 0
Security: 0
Stars: 23
Watchers: 2
Forks: 5
Open Issues: 0
Type:package
Requires
- php: ^8.0|^8.1|^8.2|^8.3
- illuminate/support: ^8.0|^9.0|^10.0|^11.0
- livewire/livewire: ^3.0
Requires (Dev)
- orchestra/testbench: ^6.0
README
Laravel blade
directives and php helpers
for server side rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS
An example to show the purpose of this package:
<?php if(windowXs() || mobileDevice()) { //execute a tiny Eloquent query and return a minimalistic view } if(window2xl()) { //execute a huge Eloquent query and return a gigantic view }
Requirements
- php 8
- Laravel 8
- Livewire
- AlpineJS
Do you want a pure Javascript version instead?
There is a Laravel/VanillaJS version of this package. Link >>>
Description
The main purpose of this package is not to avoid duplicated html, but to avoid unnecessary server side code execution, just to render content that will never be seen.
- AlpineJS syncs the browsers inner
width
andheight
, in realtime (debounced 750ms), when the browser window is resized. - The corresponding Livewire component will store the values to the Laravel
Session
. - The package has a
config/breakpoints
file where you set your breakpoints - The package provides multiple
@blade
directives and Laravelhelpers()
- You have access to the browser window width/height via
session('windowW')
andsession('windowH')
- There is also a
HasBreakpoints
trait toset
andget
dynamic breakpoints to override config. - You can change the config dynamically with Laravel
Config::set(...)
Important note
It's important to understand the difference between the server side rendered breakpoints, that this package provides, and css media queries.
When using css, the content of the page will update in realtime as the user resizes the window, whereas this package debounces a network request.
If you are using a Livewire, the component will update on its next request, otherwise the page will update on the next page request.
It's important that you place the <livewire:breakpoints />
at first point of contact with the user, for your application to look its best. I have it in my app.blade.php
and on the login
/register
pages.
Installation
composer require tanthammar/livewire-window-size
Publish config
php artisan vendor:publish --tag=livewire-window-size
The default settings are based on TailwindCSS breakpoints
'window-width' => [ // 0 = undefined|false // @windowXs (>= 1px && < Sm) 'Sm' => 640, // => @windowSm (>= 640px && < Md) 'Md' => 768, // => @windowMd (>= 768px && < Lg) 'Lg' => 1024, // => @windowLg (>= 1024px && < Xl) 'Xl' => 1280, // => @windowXl (>= 1280px && < 2xl) '2xl' => 1536, // => @window2xl (>= 1536px) ],
Add the component to your layout
- Add this to all layouts where you want to keep track of the browser window size.
- You will have access to the browser window width/height via
session('windowW')
andsession('windowH')
Example: app.blade.php
<livewire:breakpoints />
Blade directives
@elsif..., @else..., @end..., @unless... and @endif works with all the directives. Explanation in Laravel docs.
//Browser width, with example values @windowWidthLessThan(400) @windowWidthGreaterThan(399) @windowWidthBetween(400, 1500) //Browser height, with example values @windowHeightLessThan(500) @windowHeightGreaterThan(499) @windowHeightBetween(400, 900) //Breakpoints based on config values @windowXs() @windowSm() @windowMd() @windowLg() @windowXl() @window2xl()
Example
@windowXs() <div>This window is extra small</div> @endif @window2xl() <div>This window is very large</div> @endif
Helpers
Same name as Blade directives
//Mobile device detection based on request header. mobileDevice() //Browser width, with example values windowWidthLessThan(400) windowWidthGreaterThan(399) windowWidthBetween(400, 1500) //Browser height, with example values windowHeightLessThan(500) windowHeightGreaterThan(499) windowHeightBetween(400, 900) //Breakpoints based on config values windowXs() windowSm() windowMd() windowLg() windowXl() window2xl()
Example php
if(windowXs()) { //execute a tiny Eloquent query and return a minimalistic view } if(window2xl()) { //execute a huge Eloquent query and return a gigantic view }
HasBreakpoints trait
Add the trait to a component to import config values and get/set custom breakpoints dynamically.
use Tanthammar\LivewireWindowSize\HasBreakpoints; class Foo extends \Livewire\Component { use HasBreakpoints; ... }
Blade directives test component
Add this to any blade view to test the blade directives
<x-breakpoints::test-windowsize />
💬 Let's connect
Discuss with other tall-form users on the official Livewire Discord channel. You'll find me in the "partners/tall-forms" channel.
- 🔗 Discord
- 🔗 Twitter
- 🔗 Youtube
- 🔗 Devdojo
- 🔗 Please 💗 sponsor me if you like my work.
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
License
The MIT License (MIT). Please see License File for more information.