Fullscreen

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

#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

Live Site

TODO

#Changelog

See CHANGELOG.md