useFullscreen()
The useFullscreen()
hook can toggle between entering fullscreen mode and exiting fullscreen mode.
Import
import { useFullscreen } from 'react-haiku';
Usage
Is in Fullscreen Mode: False
For Overall Document
import { useEffect, useRef } from 'react'
import { useFullscreen } from 'react-haiku';
export const Component = () => {
const documentRef = useRef(null);
useEffect(() => {
documentRef.current = document.documentElement;
}, []);
const {isFullscreen, toggleFullscreen } = useFullscreen(documentRef);
return (
<div>
<b>Is in Fullscreen Mode: {isFullscreen ? "True" : "False"}</b>
<button onClick={toggleFullscreen}>Toggle Fullscreen!</button>
</div>
);
}
For Specific Element
import { useEffect } from 'react'
import { useFullscreen } from 'react-haiku';
export const Component = () => {
const elementRef = useRef(null);
const {isFullscreen, toggleFullscreen } = useFullscreen(elementRef);
return (
<div ref={elementRef}>
<b>Is in Fullscreen Mode: {isFullscreen ? "True" : "False"}</b>
<button onClick={toggleFullscreen}>Toggle Fullscreen!</button>
</div>
);
}
API
This hook accepts the following arguments:
targetRef
- a reference to the DOM element you want to toggle fullscreen for.