Breakpoints

Reactive viewport breakpoints.

Usage

<script>
    import {breakpoints} from "@sveu/browser"

    const { gt, gte, lt, lte, bn, xs, sm, md, lg, xl } = breakpoints({
        tablet: 640,
        laptop: 1024,
        desktop: 1280,
    })

    const laptop = bn('laptop', 'desktop')
</script>

<h1>{$laptop}</h1>
<script>
    import {breakpoints} from "@sveu/browser"

    const { gt, gte, lt, lte, bn, xs, sm, md, lg, xl } = breakpoints({
        tablet: 640,
        laptop: 1024,
        desktop: 1280,
    })

    const laptop = bn('laptop', 'desktop')
</script>

<h1>{$laptop}</h1>
svelte

Example

SM Width: 640

SM: false

SME: false

MD: false

LG: false

XL: false

XXL: false

XXXL: false

<script>
    import { breakpoints } from "@sveu/browser"

    const breakpoints_tailwind = {
        sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        "2xl": 1536,
    }

    const breakpoint = breakpoints(breakpoints_tailwind)

    const sm_width = breakpoints_tailwind.sm

    const sm = breakpoint.lt("sm")

    const sme = breakpoint.lte("sm")

    const md = breakpoint.bn("sm", "md")

    const lg = breakpoint.bn("md", "lg")

    const xl = breakpoint.bn("lg", "xl")

    const xxl = breakpoint.bn("xl", "2xl")

    const xxxl = breakpoint["2xl"]
</script>

<div class="text-center">
    <h1>SM Width: {sm_width}</h1>

    <h1>SM: {$sm}</h1>

    <h1>SME: {$sme}</h1>

    <h1>MD: {$md}</h1>

    <h1>LG: {$lg}</h1>

    <h1>XL: {$xl}</h1>

    <h1>XXL: {$xxl}</h1>

    <h1>XXXL: {$xxxl}</h1>
</div>
<script>
    import { breakpoints } from "@sveu/browser"

    const breakpoints_tailwind = {
        sm: 640,
        md: 768,
        lg: 1024,
        xl: 1280,
        "2xl": 1536,
    }

    const breakpoint = breakpoints(breakpoints_tailwind)

    const sm_width = breakpoints_tailwind.sm

    const sm = breakpoint.lt("sm")

    const sme = breakpoint.lte("sm")

    const md = breakpoint.bn("sm", "md")

    const lg = breakpoint.bn("md", "lg")

    const xl = breakpoint.bn("lg", "xl")

    const xxl = breakpoint.bn("xl", "2xl")

    const xxxl = breakpoint["2xl"]
</script>

<div class="text-center">
    <h1>SM Width: {sm_width}</h1>

    <h1>SM: {$sm}</h1>

    <h1>SME: {$sme}</h1>

    <h1>MD: {$md}</h1>

    <h1>LG: {$lg}</h1>

    <h1>XL: {$xl}</h1>

    <h1>XXL: {$xxl}</h1>

    <h1>XXXL: {$xxxl}</h1>
</div>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Click fold/expand code

API

Arguments

Name Description Type Required
breakpoints The breakpoints to use. Breakpoints<K> Yes


Returns

Name Description Type
gt Checks if the viewport is greater than the breakpoint. Readable<boolean>
gte Checks if the viewport is greater than or equal to the breakpoint. Readable<boolean>
lt Checks if the viewport is smaller than the breakpoint. Readable<boolean>
lte Checks if the viewport is smaller than or equal to the breakpoint. Readable<boolean>
bn Checks if the viewport is between the two breakpoints. Readable<boolean>
shortcut Shortcut methods for each breakpoint Readable<boolean>
Last update at: Invalid Date