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.

# npm
npm i svelte-visibility-change

# pnpm
pnpm i svelte-visibility-change

# Yarn
yarn add svelte-visibility-change

# Bun
bun add svelte-visibility-change

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."

<script>
  import VisibilityChange from "svelte-visibility-change";

  let state; /** "visible" | "hidden" */

  $: if (typeof window !== "undefined") {
    document.title = state;
  }
</script>

<VisibilityChange bind:state />

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

<script>
  import VisibilityChange from "svelte-visibility-change";

  let visible; /** boolean */
  let hidden; /** boolean */
</script>

<VisibilityChange bind:visible bind:hidden />

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

<script>
  import VisibilityChange from "svelte-visibility-change";

  let events = [];
</script>

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

{events.join(", ")}

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.

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

An alternative to the VisibilityChange component is the visibilityChange action.

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

<script>
  import { visibilityChange } from "svelte-visibility-change";
</script>

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

• on:visible: fired if the page is visible
• on:hidden: fired if the page visibility is hidden
• on:change: fired when a page visibility event occurs, after the initial mount

CHANGELOG.md

MIT