svelte-visibility-change

[![NPM][npm]][npm-url]

> Detect browser page visibility changes using the Page Visibility API

Use this utility component and action to listen to browser page visibility changes.

The visibility state of a page can either be visible or hidden.

Use cases

- make a network request when the browser tab is focused
- check for app UI updates when the tab is focused
- play/pause audio when the tab is focused/blurred
- pause expensive background computations when the tab is blurred

Try it in the Svelte REPL.

---

Installation

``sh


npm

Bind to the state prop to determine if the current tab is currently visible or hidden.

In the following example, switch to a different tab in the same browser window. The page title should change from "visible" to "hidden."

`svelte



`

$3

You can also bind to the boolean visible and hidden props.

`svelte



`

$3

An alternative to binding to props is to listen to the on:visible and on:hidden dispatched events.

`svelte


on:visible={() => (events = [...events, "on:visible"])}
on:hidden={() => (events = [...events, "on:hidden"])}
/>

{events.join(", ")}
`

$3

This component dispatches an on:change event whenever a visibilitychange event occurs.

Note: unlike on:visible, this event only fires when the page visibility changes _after the component has mounted._

`svelte
on:change={({ detail }) => {
console.log(detail.state); // "visible" | "hidden"
console.log(detail.visible); // boolean
console.log(detail.hidden); // boolean
}}
/>
`

$3

An alternative to the VisibilityChange component is the visibilityChange action.

The action only dispatches a "change" event with the same event.detail signature.

`svelte


use:visibilityChange
on:visibilitychange={({ detail }) => {
console.log(detail.state); // "visible" | "hidden"
console.log(detail.visible); // boolean
console.log(detail.hidden); // boolean
}}
>