@frankhoodbs/breakpoints
v2.2.4
Published
Simple utility to handle breakpoints responsiveness
Downloads
480
Keywords
Readme
Vue Breakpoints Utility
A Vue 3 utility that offers a streamlined interface for working with CSS breakpoints, leveraging CSS custom properties (or CSS variables) defined within the :root
selector. This utility taps into the css-custom-properties-list
dependency to extract the custom properties and provides handy methods to manage media queries within Vue.
Key Features
- Automatic Breakpoint Extraction: Identifies and handles breakpoints straight from CSS custom properties.
- Vue Integration: Harnesses Vue's reactivity to provide real-time information about the current breakpoints and media query utilities.
- Prefix Support: Supports custom prefixes for breakpoint variable names.
Usage
To get started, first import and initialize the Breakpoints
class:
import { Breakpoints } from '@your-package/vue-breakpoints-utility';
const breakpointsUtility = new Breakpoints(document.documentElement, document.styleSheets);
Accessing the Current Breakpoint
You can easily get the current active breakpoint:
console.log(breakpointsUtility.currentBreakpoint.value); // e.g. 'md'
Utility Methods for Media Queries
The utility offers a range of methods designed to facilitate media query management. Here are some of the most common uses:
- And Up - Returns true if the viewport width is at or above the specified breakpoint:
if (breakpointsUtility.utilityMethods.mdAndUp.value) {
// Code for medium devices and above
}
- And Down - Returns true if the viewport width is at or below the specified breakpoint:
if (breakpointsUtility.utilityMethods.lgAndDown.value) {
// Code for large devices and below
}
- Only - Returns true only for the specific breakpoint:
if (breakpointsUtility.utilityMethods.lgOnly.value) {
// Code exclusive to large devices
}
These utilities harness Vue's reactivity, ensuring your UI or logic adapts in real-time to viewport changes. This should give a comprehensive guide on the utility's usage, including the main methods that were mentioned in the code.
Dependencies
@vueuse/core
: Used for harnessing the reactivity of Vue 3.@frankhoodbs/css-custom-properties-list
: Employed to extract CSS custom properties.