@solid-primitives/fullscreen

Creates a primitive wrapper around the Fullscreen API that can either be used as a directive or a primitive.

Installation

npm install @solid-primitives/fullscreen
# or
yarn add @solid-primitives/fullscreen

How to use it

createFullScreen

const MyComponent2: Component = () => {
  const [fs, setFs] = createSignal(false);
  let [ref, setRef] = createSignal<HTMLDivElement>();
  const active: Accessor<boolean> = createFullscreen(ref, fs);
  return (
    <div ref={setRef} onClick={() => setFs(fs => !fs)}>
      {!active() ? "click to fullscreen" : "click to exit fullscreen"}
    </div>
  );
};

This variant requires the ref to be a signal, otherwise the not-yet-filled ref will be captured in the closure of the primitive.

You can either put the options into the second argument accessor output (useful for the directive use case) or as a third argument.

Directive

const isActive: Accessor<boolean> = createFullscreen(
  ref: HTMLElement | undefined,
  active?: Accessor<FullscreenOptions | boolean>,
  options?: FullscreenOptions
);

// can be used as a directive

const MyComponent: Component = () => {
  const [fs, setFs] = createSignal(false);
  return (<div use:createFullScreen={fs} onClick={() => setFs(fs => !fs)}>
    {!fs() ? 'click to fullscreen' : 'click to exit fullscreen'}
  </div>);
}

Demo

TODO

Changelog

See CHANGELOG.md