@solid-primitives/fullscreen NPM

@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!: HTMLDivElement;
  const active: Accessor<boolean> = createFullscreen(ref, fs);
  return (
    <div ref={ref} onClick={() => setFs(fs => !fs)}>
      {!active() ? "click to fullscreen" : "click to exit fullscreen"}
    </div>
  );
};

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>);
}