This article is the fifteenth of a series of articles explaining the source code of ahoos in simple language, which has been organized into document- address . I think it's not bad, give a star to support it, thanks.
This article then interprets each Hook package about the DOM.
useFullscreen
Hook that manages the full screen of the DOM.
This hook is mainly implemented by relying on the npm package screenfull .
There are two reasons for choosing it:
- It has good compatibility and is compatible with the full-screen API of various browsers.
- Simple, small package size. Only 1.1k after compression.
About a few of its API.
- .request(element, options?). Makes an element fullscreen. The default element is
<html> - .exit(). Exit Full Screen.
- .toggle(element, options?). If it is currently full screen, exit, otherwise enter full screen.
- .on(event, function). Add a listener for when the browser switches to or from fullscreen or when an error occurs. event supports 'change' or 'error'. Two other ways of writing:
.onchange(function)and.onerror(function). - .isFullscreen. Determine if it is full screen.
- .isEnabled. Determines whether the current environment supports full screen.
Take a look at the encapsulation of this hook:
The first is in the onChange event to determine whether it is full screen, thereby triggering the function to enter the full screen or the function to exit the full screen.
When exiting full screen, unload change event.
const { onExit, onEnter } = options || {};
// 退出全屏触发
const onExitRef = useLatest(onExit);
// 全屏触发
const onEnterRef = useLatest(onEnter);
const [state, setState] = useState(false);
const onChange = () => {
if (screenfull.isEnabled) {
const { isFullscreen } = screenfull;
if (isFullscreen) {
onEnterRef.current?.();
} else {
screenfull.off('change', onChange);
onExitRef.current?.();
}
setState(isFullscreen);
}
}; Manually enter the full screen function, support passing in ref to set elements that need full screen. And set it through screenfull.request and listen to the change event.
// 进入全屏
const enterFullscreen = () => {
const el = getTargetElement(target);
if (!el) {
return;
}
if (screenfull.isEnabled) {
try {
screenfull.request(el);
screenfull.on('change', onChange);
} catch (error) {
console.error(error);
}
}
}; To exit the fullscreen method, call screenfull.exit() .
// 退出全屏
const exitFullscreen = () => {
if (!state) {
return;
}
if (screenfull.isEnabled) {
screenfull.exit();
}
};Finally, through toggleFullscreen, according to the current state, the above two methods are called to achieve the effect of switching the full-screen state.
// 切换模式
const toggleFullscreen = () => {
if (state) {
exitFullscreen();
} else {
enterFullscreen();
}
};useHover
Monitors whether the DOM element has mouseover.
The main implementation principle is to monitor mouseenter to trigger the onEnter event, the switching state is true, and monitor mouseleave to trigger the onLeave event, and the switching state is false. The code is simple, as follows:
export default (target: BasicTarget, options?: Options): boolean => {
const { onEnter, onLeave } = options || {};
const [state, { setTrue, setFalse }] = useBoolean(false);
// 通过监听 mouseenter 判断有鼠标悬停
useEventListener(
'mouseenter',
() => {
onEnter?.();
setTrue();
},
{
target,
},
);
// mouseleave 没有鼠标悬停
useEventListener(
'mouseleave',
() => {
onLeave?.();
setFalse();
},
{
target,
},
);
return state;
};useDocumentVisibility
Check if the page is visible.
This hook mainly uses the Document.visibilityState API. Let's take a brief look at this API:
Document.visibilityState (read-only property), returns the visibility of the document, that is, the context of the currently visible element. From this, you can know whether the current document (ie, the page) is behind, or an invisible hidden tab, or (being) pre-rendered. The available values are as follows:
- 'visible' : The page content is at least partially visible at this time. That is, the page is in the foreground tab and the window is not minimized.
- 'hidden' : The page is not visible to the user at this time. That is, the document is in a background tab or the window is minimized, or the operating system is in a 'lock screen state'.
- 'prerender' : The page is currently being rendered and therefore invisible. Documents can only start from this state and can never change to this state from any other value.
Typical usage is to prevent resources from loading while the page is rendering, or to suppress certain activities when the page is in the background or the window is minimized.
Finally, the implementation of this hook is very simple:
- Determine whether it is visible through document.visibilityState.
- Through the visibilitychange event, update the result.
const getVisibility = () => {
if (!isBrowser) {
return 'visible';
}
// Document.visibilityState （只读属性）, 返回document的可见性， 即当前可见元素的上下文环境。
return document.visibilityState;
};
function useDocumentVisibility(): VisibilityState {
const [documentVisibility, setDocumentVisibility] = useState(() => getVisibility());
useEventListener(
// 监听该事件
'visibilitychange',
() => {
setDocumentVisibility(getVisibility());
},
{
target: () => document,
},
);
return documentVisibility;
}This article has been included in the personal blog , welcome to pay attention~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。