Skip to content
On this page

useBreakpoints

Category
Export Size
1.38 kB
Last Changed
4 months ago

Reactive viewport breakpoints

Demo

sm(<640px): false
sm(<=640px): false
md: false
lg: false
xl: false
2xl: false
3xl: false

Usage

js
import { breakpointsTailwind, useBreakpoints } from '@vueuse/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
import { breakpointsTailwind, useBreakpoints } from '@vueuse/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
js
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

const laptop = breakpoints.between('laptop', 'desktop')
import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

const laptop = breakpoints.between('laptop', 'desktop')

Type Declarations

Show Type Declarations
typescript
export * from "./breakpoints"
export declare type Breakpoints<K extends string = string> = Record<
  K,
  number | string
>
/**
 * Reactively viewport breakpoints
 *
 * @see https://vueuse.org/useBreakpoints
 * @param options
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: ConfigurableWindow
): {
  greater(k: K): Ref<boolean>
  greaterOrEqual: (k: K) => Ref<boolean>
  smaller(k: K): Ref<boolean>
  smallerOrEqual(k: K): Ref<boolean>
  between(a: K, b: K): Ref<boolean>
  isGreater(k: K): boolean
  isGreaterOrEqual(k: K): boolean
  isSmaller(k: K): boolean
  isSmallerOrEqual(k: K): boolean
  isInBetween(a: K, b: K): boolean
} & Record<K, Ref<boolean>>
export declare type UseBreakpointsReturn<K extends string = string> = {
  greater: (k: K) => Ref<boolean>
  greaterOrEqual: (k: K) => Ref<boolean>
  smaller(k: K): Ref<boolean>
  smallerOrEqual: (k: K) => Ref<boolean>
  between(a: K, b: K): Ref<boolean>
  isGreater(k: K): boolean
  isGreaterOrEqual(k: K): boolean
  isSmaller(k: K): boolean
  isSmallerOrEqual(k: K): boolean
  isInBetween(a: K, b: K): boolean
} & Record<K, Ref<boolean>>
export * from "./breakpoints"
export declare type Breakpoints<K extends string = string> = Record<
  K,
  number | string
>
/**
 * Reactively viewport breakpoints
 *
 * @see https://vueuse.org/useBreakpoints
 * @param options
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: ConfigurableWindow
): {
  greater(k: K): Ref<boolean>
  greaterOrEqual: (k: K) => Ref<boolean>
  smaller(k: K): Ref<boolean>
  smallerOrEqual(k: K): Ref<boolean>
  between(a: K, b: K): Ref<boolean>
  isGreater(k: K): boolean
  isGreaterOrEqual(k: K): boolean
  isSmaller(k: K): boolean
  isSmallerOrEqual(k: K): boolean
  isInBetween(a: K, b: K): boolean
} & Record<K, Ref<boolean>>
export declare type UseBreakpointsReturn<K extends string = string> = {
  greater: (k: K) => Ref<boolean>
  greaterOrEqual: (k: K) => Ref<boolean>
  smaller(k: K): Ref<boolean>
  smallerOrEqual: (k: K) => Ref<boolean>
  between(a: K, b: K): Ref<boolean>
  isGreater(k: K): boolean
  isGreaterOrEqual(k: K): boolean
  isSmaller(k: K): boolean
  isSmallerOrEqual(k: K): boolean
  isInBetween(a: K, b: K): boolean
} & Record<K, Ref<boolean>>

Source

SourceDemoDocs

Contributors

Anthony Fu
Imam Susanto
azaleta
webfansplz
Ege İliklier
Shinigami
Alex Kozack
taidaid
wheat
Azri Kahar

Changelog

v9.7.0 on 12/16/2022
30c5b - feat: add breakpoints for Master CSS (#2529)
v9.2.0 on 9/5/2022
48bf3 - feat: support greaterOrEqual etc. (#2148)
v6.8.0 on 11/6/2021
0bcf5 - feat: shortcuts (#905)

Released under the MIT License.