
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
alpinejs-breakpoints
Advanced tools
A Alpine.js plugin and magic method that helps components respond to 📱 💻 🖥 breakpoint changes.
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>
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()
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>
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 -->
// The default breakpoints array:
// ['unset', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
//
// You can change default breakpoints array:
window.AlpineBreakpointPluginBreakpointsList = ['mobile', 'tablet', 'desktop']
FAQs
Alpine v3.x breakpoints plugin
The npm package alpinejs-breakpoints receives a total of 161 weekly downloads. As such, alpinejs-breakpoints popularity was classified as not popular.
We found that alpinejs-breakpoints demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.