Page Utilities

Primitives for page visibility and navigation blocking

npm i @solid-primitives/page-utilities@next

Primitives for tracking page visibility and intercepting navigation away from the page.

• createPageVisibility - Reactive signal tracking whether the page is currently visible
• usePageVisibility - Shared singleton root version of createPageVisibility
• makePageLeave - Intercepts beforeunload to prevent navigation; returns a manual cleanup function
• createPageLeaveBlocker - Reactive version of makePageLeave; accepts a signal to toggle prevention

createPageVisibility

Returns a reactive boolean signal reflecting the Page Visibility API — true when the page is visible, false when hidden or in a prerender state. On the server it always returns true.

import { createPageVisibility } from "@solid-primitives/page-utilities";

const visible = createPageVisibility();

createEffect(() => {
  console.log(visible()); // => boolean
});

Definition

function createPageVisibility(): Accessor<boolean>;

usePageVisibility

A singleton root version of createPageVisibility. The underlying event listener and signal are shared across all callers, making it more efficient when used in multiple places simultaneously.

import { usePageVisibility } from "@solid-primitives/page-utilities";

const visible = usePageVisibility();

createEffect(() => {
  console.log(visible()); // => boolean
});

Definition

const usePageVisibility: () => Accessor<boolean>;

makePageLeave

Intercepts the browser's beforeunload event to show a confirmation dialog when the user attempts to close the tab, refresh, or navigate away. Returns a cleanup function to remove the listener.

import { makePageLeave } from "@solid-primitives/page-utilities";

const cleanup = makePageLeave();

// remove the listener when done
cleanup();

Definition

function makePageLeave(): VoidFunction;

createPageLeaveBlocker

Reactive version of makePageLeave. Accepts an optional enabled parameter — a static boolean or a reactive signal — to toggle prevention on and off. Defaults to true. Automatically removes the listener when the reactive owner is disposed. No-ops on the server.

import { createPageLeaveBlocker } from "@solid-primitives/page-utilities";

// Always block navigation
createPageLeaveBlocker();

A common pattern is gating on unsaved state:

const [isDirty, setIsDirty] = createSignal(false);

createPageLeaveBlocker(isDirty);

Definition

function createPageLeaveBlocker(enabled?: MaybeAccessor<boolean>): void;

Changelog

See CHANGELOG.md