@ib-hooks/use-full-screen
v1.0.1
Published
React Hook to make any element go full screen.
Downloads
9
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 |