Fullscreen

Primitive that wraps the fullscreen API.

npm i @solid-primitives/fullscreen@next

Reactive wrapper around the Fullscreen API.

• Docs (Storybook)
• makeFullscreen — Non-reactive base, no Solid lifecycle.
• createFullscreen — Reactive primitive with isActive state tracking.
• fullscreen — Ref factory for click-to-toggle.

Primitives

makeFullscreen

Non-reactive base primitive. No Solid lifecycle dependency — safe to use outside components.

const [enter, exit] = makeFullscreen(element, options?: FullscreenOptions);

enter(options?) calls element.requestFullscreen(). Call-time options override creation-time options. exit() calls document.exitFullscreen().

const [enter, exit] = makeFullscreen(videoEl, { navigationUI: "hide" });
button.addEventListener("click", enter);

createFullscreen

Reactive primitive that binds enter/exit to an element and tracks fullscreen state via the fullscreenchange event.

const { enter, exit, isActive } = createFullscreen(
  ref: HTMLElement | Accessor<HTMLElement | undefined>,
  options?: FullscreenPrimitiveOptions,
);

enter() and exit() must be called from a direct user gesture — the browser requires it. isActive is an Accessor<boolean> that reflects the live fullscreen state.

const { enter, exit, isActive } = createFullscreen(ref);

<button onClick={enter}>Go fullscreen</button>
<Show when={isActive()}>
  <button onClick={exit}>Exit</button>
</Show>

ref can be a reactive accessor — createFullscreen rebinds when the element changes:

const [ref, setRef] = createSignal<HTMLDivElement>();
const { enter, isActive } = createFullscreen(ref);

<div ref={setRef}>...</div>;

FullscreenPrimitiveOptions

Extends the standard FullscreenOptions with:

const { enter } = createFullscreen(ref, { exitOnCleanup: false, navigationUI: "hide" });

fullscreen (ref directive factory)

A ref factory that wires click-to-toggle fullscreen onto any element. Clicking enters fullscreen; clicking again exits. Must be called inside a reactive owner (component body or createRoot).

const attach = fullscreen(options?: FullscreenOptions);
// attach is a ref callback: (el: HTMLElement) => void

// Simple toggle
<div ref={fullscreen()}>Click to go fullscreen</div>

// With options
<div ref={fullscreen({ navigationUI: "hide" })}>Click to go fullscreen</div>

The click listener is removed automatically when the component unmounts.

Changelog

See CHANGELOG.md