@solid-primitives/page-visibility/dist/index.js

Primitive to track page visibility

import { isServer } from "solid-js/web";
import { createHydratableSingletonRoot } from "@solid-primitives/rootless";
import { createHydratableSignal, trueFn } from "@solid-primitives/utils";
import { makeEventListener } from "@solid-primitives/event-listener";
/**
 * Creates a signal with a boolean value identifying the page visibility state.
 *
 * @example
 * ```ts
 * const visible = createPageVisibility();
 *
 * createEffect(() => {
 *    visible() // => boolean
 * })
 * ```
 */
export const createPageVisibility = () => {
    if (isServer) {
        return trueFn;
    }
    const checkVisibility = () => document.visibilityState === "visible";
    const [isVisible, setVisible] = createHydratableSignal(true, checkVisibility);
    makeEventListener(document, "visibilitychange", () => setVisible(checkVisibility));
    return isVisible;
};
/**
 * Returns a signal with a boolean value identifying the page visibility state.
 *
 * This is a [singleton root primitive](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) except if during hydration.
 *
 * @example
 * ```ts
 * const visible = usePageVisibility();
 *
 * createEffect(() => {
 *    visible() // => boolean
 * })
 * ```
 */
export const usePageVisibility = 
/*#__PURE__*/ createHydratableSingletonRoot(createPageVisibility);