上手指南
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> }