alpinejs-breakpoints

v2.1.1

Alpine v3.x breakpoints plugin

alpinejs alpine plugin breakpoint responsive

0/weekUpdated 3 years agoMITUnpacked: 10.5 KB

Published by Pasha Frolov

npm install alpinejs-breakpoints

Repository Homepage npm

Alpine Breakpoints Plugin

A Alpine.js plugin and magic method that helps components respond to 📱 💻 🖥 breakpoint changes.

Installation

$3

You can include the CDN build of this plugin as a `

`$3`

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()`

`Usage`


First define the breakpoints for all screen sizes you want, as in the example below:

`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']``

Installation

You can include the CDN build of this plugin as a

$3

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()

Usage

First define the breakpoints for all screen sizes you want, as in the example below:

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'
  ">