Alpine Breakpoints Plugin

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

Installation

CDN

You can include the CDN build of this plugin as a <script> tag, just make sure to include it before Alpinejs file.

  <script defer src="https://unpkg.com/alpinejs-breakpoints"></script>
  <script defer src="https://unpkg.com/alpinejs"></script>

NPM

You can install Intersect from NPM for use inside your bundle like so:

  npm install alpinejs-breakpoints

Then initialize it from your bundle:

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:

: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.

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

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:

  $isBreakpoint('xl')  <!-- will work only on [xl] screen -->
  $isBreakpoint('lg+') <!-- will work on [lg xl 2xl] (lg and above) screens -->   
  $isBreakpoint('md-') <!-- will work on [md sm unset] (md and below) screens -->

Customization

  // The default breakpoints array:
  // ['unset', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
  // 
  // You can change default breakpoints array: 
  window.AlpineBreakpointPluginBreakpointsList = ['mobile', 'tablet', 'desktop']