Хук useFullscreenState отслеживает текущее состояние полноэкранного режима браузера и возвращает boolean значение. Хук автоматически подписывается на события изменения fullscreen состояния и обновляет значение при входе или выходе из полноэкранного режима. Поддерживает кроссбраузерную совместимость с префиксами для WebKit, Mozilla и Microsoft браузеров. Полезен для синхронизации UI с состоянием fullscreen режима, например, для показа/скрытия элементов управления.
import { useState, useEffect } from 'react';
export const useFullscreenState = (): boolean => {
const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
useEffect(() => {
const handleFullscreenChange = () => {
const isFullscreenActive =
document.fullscreenElement ||
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement;
setIsFullscreen(!!isFullscreenActive);
};
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);
handleFullscreenChange();
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange);
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
};
}, []);
return isFullscreen;
};