@ib-hooks/use-full-screen
Version:
React Hook to make any element go full screen.
52 lines (35 loc) • 1.58 kB
Markdown
add @ib-hooks/use-full-screen`
`npm i @ib-hooks/use-full-screen`
```js
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>
);
}
```
| Argument | Type | Description | Arguments | Required |
| -------- | -------- | --------------------------------------------------------------- | ---------------- | -------- |
| onChange | function | Function to be called when the screen goes full screen or exits | isFull : Boolean | no |
`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 |
React Hook to **make any element go full screen.**
`yarn