Package Exports

@ib-hooks/use-full-screen

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 (@ib-hooks/use-full-screen) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@ib-hooks/use-full-screen

React Hook to make any element go full screen.

Installation

yarn

yarn add @ib-hooks/use-full-screen

npm

npm i @ib-hooks/use-full-screen

Usage

import React from "react";
import useFullScreen from "@ib-hooks/use-full-screen";

function App() {
  const onChange = (isFull) =>
    console.log(isFull ? "Full Screen Mode" : "Exit Full Screen");

  const { element, triggerFull, exitFull } = useFullscreen(onChange);

  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Full Screen Mode</button>
      <button onClick={exitFull}>Exit Full Screen</button>
    </div>
  );
}

Arguments

Argument	Type	Description	Arguments	Required
onChange	function	Function to be called when the screen goes full screen or exits	isFull : Boolean	no

Return

useFullScreen returns an object containing the following:

Return value	Type	Description
element	React Ref	Ref to add to the element that you want to make full screen
triggerFull	Function	Function to make the element enter full screen
exitFull	Function	Function to make the document exit full screen