DOM Visible

Reactive document.visibilityState.

Usage

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

    const visible = domVisible()
</script>
<script>
    import {domVisible} from "@sveu/browser"

    const visible = domVisible()
</script>
svelte

Example

💡 Minimize the page or switch tab then return

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

    import { timeoutFn } from "@sveu/shared"

    const visible = domVisible() 

    const startMessage = "💡 Minimize the page or switch tab then return"

    let message = startMessage

    const timeout = timeoutFn(() => {
        message = startMessage
    }, 1)

    $: if ($visible === "visible") {
        message = "🎉 Welcome back!"
        timeout.resume()
    }
</script>

<h1>{message}</h1>
<script>
    import { domVisible } from "@sveu/browser" 

    import { timeoutFn } from "@sveu/shared"

    const visible = domVisible() 

    const startMessage = "💡 Minimize the page or switch tab then return"

    let message = startMessage

    const timeout = timeoutFn(() => {
        message = startMessage
    }, 1)

    $: if ($visible === "visible") {
        message = "🎉 Welcome back!"
        timeout.resume()
    }
</script>

<h1>{message}</h1>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Click fold/expand code
Last update at: Invalid Date