useFullscreen

元素的全螢幕展示

Usage

即時編輯器

function Demo() {
  const ref = useRef(null);
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }]
    = useFullscreen(ref);
  return (
    <div ref={ref}>
      <div style={{ marginBottom: 16 }}>
        {isFullscreen ? "全螢幕" : "非全螢幕"}
      </div>
      <div>
        <button type="button" onClick={enterFullscreen}>
          進入全螢幕
        </button>
        <button
          type="button"
          onClick={exitFullscreen}
          style={{ margin: "0 8px" }}
        >
          退出全螢幕
        </button>
        <button type="button" onClick={toggleFullscreen}>
          切換全螢幕
        </button>
      </div>
    </div>
  );
};

結果

非全螢幕

API

useFullScreen

Returns

readonly [boolean, { readonly enterFullscreen: () => void; readonly exitFullscreen: () => void; readonly toggleFullscreen: () => void; readonly isEnabled: boolean; }]: 包含以下元素的元組：

• 當前是否處於全螢幕。
• 一個操作對象:
• enterFullscreen： 進入全螢幕。
• exitFullscreen： 退出全螢幕。
• toggleFullscreen： 切換全螢幕。
• isEnabled： 當前瀏覽器是否支援全螢幕。

Arguments

參數名	描述	類型	預設值
target	dom元素	BasicTarget<Element> (必填)	-
options	可选参数	UseFullScreenOptions | undefined	-

UseFullScreenOptions

參數名	描述	類型	預設值
onExit	退出时候的回调	() => void	-
onEnter	进入时候的回调	() => void	-

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;