Хук useFullscreen предоставляет удобный интерфейс для работы с Fullscreen API браузера. Поддерживает кроссбраузерную совместимость, включая префиксы для WebKit (Safari, Chrome), Mozilla (Firefox) и Microsoft (Edge). Хук возвращает три функции: enterFullscreen для входа в полноэкранный режим, exitFullscreen для выхода и toggleFullscreen для переключения состояния.
import { useCallback } from 'react';
export const useFullscreen = (element: HTMLElement | null) => {
const enterFullscreen = useCallback(() => {
if (!element) return;
const requestFn =
element.requestFullscreen ||
(element as any).webkitRequestFullscreen ||
(element as any).mozRequestFullScreen ||
(element as any).msRequestFullscreen;
if (typeof requestFn === 'function') {
requestFn.call(element);
}
}, [element]);
const exitFullscreen = useCallback(() => {
const exitFn =
document.exitFullscreen ||
(document as any).webkitExitFullscreen ||
(document as any).mozCancelFullScreen ||
(document as any).msExitFullscreen;
if (typeof exitFn === 'function') {
exitFn.call(document);
}
}, []);
const toggleFullscreen = useCallback(() => {
const isFullscreen =
document.fullscreenElement ||
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement;
if (isFullscreen) {
exitFullscreen();
} else {
enterFullscreen();
}
}, [enterFullscreen, exitFullscreen]);
return {
enterFullscreen,
exitFullscreen,
toggleFullscreen,
};
};