Resize Observer

Wrapper around the

ResizeObserver API.

Usage

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

    let target = null

    $: target, resizeObserver(
        target,
        (entries) => {
            //    do something
        }
    )
</script>
<script>
    import { resizeObserver } from "@sveu/browser"

    let target = null

    $: target, resizeObserver(
        target,
        (entries) => {
            //    do something
        }
    )
</script>
svelte

Example

Resize the box to see changes

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

    let text = ""

    function observer(target) {
        const { cleanup } = resizeObserver(target, (entries) => {
            const [entry] = entries

            const { width, height } = entry.contentRect

            text = `width: ${width}\nheight: ${height}`

            return {
                destroy() {
                    cleanup()
                },
            }
        })
    }
</script>

<div class="flex flex-col items-center justify-center">
    <p class="my-9">Resize the box to see changes</p>

    <textarea use:observer class="border border-4" disabled value="{text}"
    ></textarea>
</div>
<script>
    import { resizeObserver } from "@sveu/browser"

    let text = ""

    function observer(target) {
        const { cleanup } = resizeObserver(target, (entries) => {
            const [entry] = entries

            const { width, height } = entry.contentRect

            text = `width: ${width}\nheight: ${height}`

            return {
                destroy() {
                    cleanup()
                },
            }
        })
    }
</script>

<div class="flex flex-col items-center justify-center">
    <p class="my-9">Resize the box to see changes</p>

    <textarea use:observer class="border border-4" disabled value="{text}"
    ></textarea>
</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
Click fold/expand code

API

Arguments

Name Description Type Required
target The target element to observe. HTMLElement or SVGElement Yes
callback The callback function to invoke when the dimensions of the target element change. ResizeObserverCallback Yes


Options

ResizeObserverOptions



Returns

Name Description Type
supported Whether the browser supports the ResizeObserver API. Readable<boolean>
cleanup A function to cleanup the observer. () => void
Last update at: Invalid Date