Alpine v3.x breakpoints plugin
npm install alpinejs-breakpointsYou can include the CDN build of this plugin as a tag, just make sure to include it before Alpinejs file.
``html`
You can install Intersect from NPM for use inside your bundle like so:
`bash`
npm install alpinejs-breakpoints
Then initialize it from your bundle:
`js`
import Alpine from 'alpinejs'
import breakpoint from 'alpinejs-breakpoints'
Alpine.plugin(breakpoint)
Alpine.start()
`css`
:root { --breakpoint: 'unset';}
@media screen and (min-width: 567px) {
:root { --breakpoint: 'sm'; }
}
@media screen and (min-width: 900px) {
:root { --breakpoint: 'md'; }
}
@media screen and (min-width: 1200px) {
:root { --breakpoint: 'lg'; }
}
@media screen and (min-width: 1600px) {
:root { --breakpoint: '2xl'; }
}
An example of markup for a component that reacts to screen size changes.
`html
x-data="{ text: null }"
x-text="text"
x-breakpoint="
if($isBreakpoint('lg+')) text = 'Large screen and above'
if($isBreakpoint('md-')) text = 'Medium screen and below'
">
How it works
The plugin monitors changes to the
--breakpoint variable through x-effect, with each change using the $isBreakpoint() magic method, you can check the current breakpoint and call the desired behavior.$isBreakpoint() method takes a breakpoint string from your css and optional + or - modifier.Example:
`html
$isBreakpoint('xl')
$isBreakpoint('lg+')
$isBreakpoint('md-')
`Customization
`js
// The default breakpoints array:
// ['unset', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
//
// You can change default breakpoints array:
window.AlpineBreakpointPluginBreakpointsList = ['mobile', 'tablet', 'desktop']
``