@ej-hooks/use-fullscreen
React Hook to make any element go Fullscreen
Installation
yarn
yarn add @ej-hooks/use-fullscreen
npm
npm i @ej-hooks/use-fullscreen
Usage
import React from 'react';
import useFullscreen from '@ej-hooks/use-fullscreen';
function App() {
const onChange = (isFull) =>
console.log(isFull ? 'We are in Fullscreen' : 'We are not in Fullscreen');
const { element, triggerFull, exitFull } = useFullscreen(onChange);
return (
<div 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 |