VueUseuseBreakpoints
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
Contributors
Anthony Fu
Imam Susanto
azaleta
webfansplz
Ege İliklier
Shinigami
Alex Kozack
taidaid
wheat
Azri Kahar