useBreakpoints

Package

Share - Core

Category

Browser

Description

reactive viewport breakpoints

Reactive viewport breakpoints.

Demo

Current breakpoints: []

Active breakpoint:

xs(<640px): false

xs(<=640px): false

sm: false

md: false

lg: false

xl: false

2xl: false

greaterThanBreakPoint: false

Usage

import { breakpointsTailwind, useBreakpoints } from '@hungpvq/shared-core';

const breakpoints = useBreakpoints(breakpointsTailwind);

const smAndLarger = breakpoints.greaterOrEqual('sm'); // sm and larger
const largerThanSm = breakpoints.greater('sm'); // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg'); // lg and smaller
const smallerThanLg = breakpoints.smaller('lg'); // only smaller than lg

<script setup lang="ts">
import { useBreakpoints } from '@hungpvq/shared-core';

const breakpoints = useBreakpoints({
  mobile: 0, // optional
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
});

// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
const activeBreakpoint = breakpoints.active();

// true or false
const laptop = breakpoints.between('laptop', 'desktop');
</script>

<template>
  <div :class="activeBreakpoint">...</div>
</template>

Presets

• Tailwind: breakpointsTailwind
• Bootstrap v5: breakpointsBootstrapV5
• Vuetify v2: breakpointsVuetifyV2 (deprecated: breakpointsVuetify)
• Vuetify v3: breakpointsVuetifyV3
• Ant Design: breakpointsAntDesign
• Quasar v2: breakpointsQuasar
• Sematic: breakpointsSematic
• Master CSS: breakpointsMasterCss
• Prime Flex: breakpointsPrimeFlex

Breakpoint presets are deliberately not auto-imported. They have to be explicitly imported:

import { breakpointsTailwind } from '@hungpvq/shared-core';
// and so on