Package Exports

@solid-primitives/fullscreen

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@solid-primitives/fullscreen) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@solid-primitives/fullscreen

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

How to use it

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

// or a primitive

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.

Demo

TODO

Changelog

Expand Changelog

0.0.100

Initial release