@ziphooks/use-fullscreen

React Hook for change a component to fullscreen mode and normal mode.

Installation

yarn

yarn add @ziphooks/use-fullscreen

npm

npm i @ziphooks/use-fullscreen

Usage

import React from "react";
import useFullscreen from "@ziphooks/use-fullscreen";

function App() {
  const { element, triggerFull, exitFull } = useFullscreen(isFull => alert(isFull ? "I am FULL" : "I am not FULL")));
  return (
    <div ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Enter Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
};

Arguments

| Argument | Type | Description | Required | | -- | -- | -- | -- | | onChange | Function | A function to be called when the screen goes Fullscreen or exits is | false |

Return

| Return value | Type | Description | | -- | -- | -- | | element | React Ref | A ref to add to the element that you want to make fullscreen | | triggerFull | Function | A function to make the element enter fullscreen | | exitFull | Function | A function to make the document exit fullscreen |