上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useFullscreen

Tags:
Browser
isSupported

一个可以让你轻松使用 requestFullscreen API 的 React Hook。

演示

源码
Is `<HTML />` fullscreen:
false
Is element fullscreen:
false

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const fs = useFullscreen(elementTarget, options)

元素目标 ElementTarget

ElementTarget 是一个联合类型，代表可以被定位的各种元素。

更多详情，请参见 ElementTarget 或 ElementTarget 类型。

选项 Options

export type UseFullscreenOptions = {
  /**
   * 组件被卸载时自动退出全屏模式
   *
   * @defaultValue false
   */
  autoExit?: boolean
}

返回值

export interface UseFullscreenReturns {
  /**
   * 浏览器是否支持全屏 API
   */
  isSupported: boolean
  /**
   * 元素是否处于全屏模式
   */
  isFullscreen: boolean
  /**
   * 元素本身是否处于全屏模式
   */
  isSelfFullscreen: boolean
  /**
   * 进入全屏模式
   */
  enter(): Promise<void>
  /**
   * 退出全屏模式
   */
  exit(): Promise<void>
  /**
   * 切换全屏模式
   */
  toggle(): Promise<void>
}