@solid-primitives/fullscreen
TypeScript icon, indicating that this package has built-in type declarations

1.2.6 • Public • Published

Solid Primitives Fullscreen

@solid-primitives/fullscreen

turborepo size size stage

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

Demo

TODO

Changelog

See CHANGELOG.md

Dependencies (0)

    Dev Dependencies (1)

    Package Sidebar

    Install

    npm i @solid-primitives/fullscreen

    Weekly Downloads

    1

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    8.69 kB

    Total Files

    8

    Last publish

    Collaborators

    • thetarnav.
    • lexlohr
    • davedbase