記錄reactHooks實現某個頁面的全屏
阿新 • • 發佈:2021-11-18
偷師學藝來的,先存著。
import React, { useState, useMemo, useEffect } from 'react'; import { Button, Icon } from '元件庫'; const CustomIcon = Icon.createFromIconfontCN({ scriptUrl: '一個icon的js檔案' }); interface Props { dom: Element; className?: string; } const FullscreenBtn = (props: Props) => { const { dom, className } = props; const [isFullscreen, setIsFullscreen] = useState<boolean>(false); useEffect(() => { const handleChangeIsFullscreen = () => { setIsFullscreen(!!document.fullscreenElement); }; document.addEventListener('fullscreenchange', handleChangeIsFullscreen); return () => { document.removeEventListener('fullscreenchange', handleChangeIsFullscreen); }; }, []); // 全屏 const handleFullscreen = () => { dom?.requestFullscreen(); }; // 退出全屏 const handleExitFullscreen = () => { document.exitFullscreen(); }; const text: string = useMemo(() => (isFullscreen ? '退出全屏' : '全屏'), [isFullscreen]); return ( <Button className={className} onClick={isFullscreen ? handleExitFullscreen : handleFullscreen} > <CustomIcon size="small" style={{ marginRight: 5 }} type={isFullscreen ? 'icon-full-screen-cancel' : 'icon-full-screen'} /> {text} </Button> ); }; export default FullscreenBtn;