@practical-react-hooks/use-fullscreen

React Hook to make any element go Fullscreen

Installation

yarn

yarn add @practical-react-hooks/use-fullscreen

npm

npm i @practical-react-hooks/use-fullscreen

Usage

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

const App = () => {
  const onChange = isFull => console.log(isFull ? "We are in Fullscreen" : "We are not in Fullscreen");
  const { element, triggerFull, exitFull } = useFullscreen(onChange);
  return (
    <div className="App" ref={element}>
      <h1>Hello</h1>
      <button onClick={triggerFull}>Make this Fullscreen</button>
      <button onClick={exitFull}>Exit Fullscreen</button>
    </div>
  );
};

Arguments

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

Return

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