{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-fullscreen",
  "title": "useFullscreen",
  "description": "A hook to handle fullscreen mode",
  "files": [
    {
      "path": "registry/hooks/use-fullscreen.ts",
      "content": "'use client'\n\nimport * as React from 'react'\n\nexport function useFullscreen({\n  element,\n  onFullscreenChange,\n}: {\n  element?: React.RefObject<HTMLElement>\n  onFullscreenChange?: (isFullscreen: boolean) => void\n} = {}) {\n  const [isFullscreen, setIsFullscreen] = React.useState(false)\n\n  const enterFullscreenEvent = React.useEffectEvent(async () => {\n    const targetElement = element?.current || document.documentElement\n\n    try {\n      if (targetElement.requestFullscreen) {\n        await targetElement.requestFullscreen()\n      }\n      else if ('mozRequestFullScreen' in targetElement && typeof targetElement.mozRequestFullScreen === 'function') {\n        await targetElement.mozRequestFullScreen()\n      }\n      else if ('webkitRequestFullscreen' in targetElement && typeof targetElement.webkitRequestFullscreen === 'function') {\n        await targetElement.webkitRequestFullscreen()\n      }\n      else if ('msRequestFullscreen' in targetElement && typeof targetElement.msRequestFullscreen === 'function') {\n        await targetElement.msRequestFullscreen()\n      }\n    }\n    catch (error) {\n      console.error('Failed to enter fullscreen mode:', error)\n    }\n  })\n\n  const exitFullscreenEvent = React.useEffectEvent(async () => {\n    try {\n      if (document.exitFullscreen) {\n        await document.exitFullscreen()\n      }\n      else if ('mozCancelFullScreen' in document && typeof document.mozCancelFullScreen === 'function') {\n        await document.mozCancelFullScreen()\n      }\n      else if ('webkitExitFullscreen' in document && typeof document.webkitExitFullscreen === 'function') {\n        await document.webkitExitFullscreen()\n      }\n      else if ('msExitFullscreen' in document && typeof document.msExitFullscreen === 'function') {\n        await document.msExitFullscreen()\n      }\n    }\n    catch (error) {\n      console.error('Failed to exit fullscreen mode:', error)\n    }\n  })\n\n  const toggleFullscreenEvent = React.useEffectEvent(() => {\n    if (isFullscreen) {\n      exitFullscreenEvent()\n    }\n    else {\n      enterFullscreenEvent()\n    }\n  })\n\n  React.useEffect(() => {\n    const handleFullscreenChange = () => {\n      const fullscreenElement\n        = document.fullscreenElement\n          || (document as any).mozFullScreenElement\n          || (document as any).webkitFullscreenElement\n          || (document as any).msFullscreenElement\n\n      const newIsFullscreen = !!fullscreenElement\n      setIsFullscreen(newIsFullscreen)\n\n      if (onFullscreenChange) {\n        onFullscreenChange(newIsFullscreen)\n      }\n    }\n\n    const abortController = new AbortController()\n\n    document.addEventListener('fullscreenchange', handleFullscreenChange, { signal: abortController.signal })\n    document.addEventListener('mozfullscreenchange', handleFullscreenChange, { signal: abortController.signal })\n    document.addEventListener('webkitfullscreenchange', handleFullscreenChange, { signal: abortController.signal })\n    document.addEventListener('MSFullscreenChange', handleFullscreenChange, { signal: abortController.signal })\n\n    return () => {\n      abortController.abort()\n    }\n  }, [onFullscreenChange])\n\n  return {\n    isFullscreen,\n    enterFullscreen: enterFullscreenEvent,\n    exitFullscreen: exitFullscreenEvent,\n    toggleFullscreen: toggleFullscreenEvent,\n  }\n}\n",
      "type": "registry:hook",
      "target": "hookas/use-fullscreen.ts"
    }
  ],
  "type": "registry:hook"
}