React front-end DOM common Hook package example

introduction

This article is the fifteenth article in the ahooks source code series. The main goals of this series are as follows:

Deepen your understanding of React hooks.
Learn how to abstract custom hooks. Build your own React hooks tool library.
To cultivate the habit of reading and learning source code, the tool library is a good choice for reading source code.

The above guides:React front-end DOM common Hook package example

This article then interprets various Hook packages about DOM.

useFullscreen

Manage DOM full-screen Hooks.

The hook is mainly dependent onscreenfullThis npm package is implemented.

There are two reasons for choosing it:

It is compatible with the full screen API of each browser.
Simple, small size. After compression, it only needs 1.1 k.

A few of its APIs are introduced.

.request(element, options?). Make an element appear in full screen. 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 to when the browser switches to full screen or switches out full screen or error occurs. event supports 'change' or 'error'. Two other ways of writing:.onchange(function)and.onerror(function)。
.isFullscreen. Determine whether it is full screen.
.isEnabled. Determine whether the current environment supports full screen.

Let’s see the package of the hook:

First of all, in the onChange event, determine whether it is full screen, thereby triggering a function entering full screen or exiting full screen. When exiting full screen, uninstallchangeevent.

const { onExit, onEnter } = options || {};
// Exit full screen triggerconst onExitRef = useLatest(onExit);
// Full screen triggerconst onEnterRef = useLatest(onEnter);
const [state, setState] = useState(false);
const onChange = () =&gt; {
  if () {
    const { isFullscreen } = screenfull;
    if (isFullscreen) {
      ?.();
    } else {
      ('change', onChange);
      ?.();
    }
    setState(isFullscreen);
  }
};

Manually enter the full screen function, and support passing in ref to set elements that require full screen. And passSet it up and listen for change events.

// Enter full screenconst enterFullscreen = () =&gt; {
  const el = getTargetElement(target);
  if (!el) {
    return;
  }
  if () {
    try {
      (el);
      ('change', onChange);
    } catch (error) {
      (error);
    }
  }
};

Exit the full screen method and call()。

// Exit full screenconst exitFullscreen = () =&gt; {
  if (!state) {
    return;
  }
  if () {
    ();
  }
};

Finally, through toggleFullscreen, call the above two methods according to the current state to achieve the effect of switching the full screen state.

useHover

Listen to whether the DOM element has a mouse hover.

The main implementation principle is monitoringmouseenterTrigger onEnter event, switch status to true, listenmouseleaveTriggers the onLeave event and switches to false. The code is simple, as follows:

export default (target: BasicTarget, options?: Options): boolean =&gt; {
  const { onEnter, onLeave } = options || {};
  const [state, { setTrue, setFalse }] = useBoolean(false);
  //Judge mouseenter to be hovered  useEventListener(
    'mouseenter',
    () =&gt; {
      onEnter?.();
      setTrue();
    },
    {
      target,
    },
  );
  // mouseleave without mouseover  useEventListener(
    'mouseleave',
    () =&gt; {
      onLeave?.();
      setFalse();
    },
    {
      target,
    },
  );
  return state;
};

useDocumentVisibility

Listen to whether the page is visible.

This hook mainly uses this API. Let’s take a look at this API first:

(Read-only attribute), returns the visibility of the document, that is, the context environment of the currently visible element. From this we can know that the current document (i.e., the page) is behind it, or is an invisible hidden tab page, or is pre-rendering. The available values are as follows:

'visible' : At this time, the page content is at least partially visible. That is, this 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 the background tab or the window is in a minimized state, or the operating system is in the 'lock screen state'.
'prerender' : The page is being rendered at this time and is therefore invisible. Documents can only start from this state and can never change from other values to this state.

A typical usage is to prevent the resource from being loaded when the page is rendering, or to prohibit certain activities when the page is in the background or window is minimized.

Finally, it is very simple to implement this hook:

Determine whether it is visible through
Update the results through the visibilitychange event.

const getVisibility = () =&gt; {
  if (!isBrowser) {
    return 'visible';
  }
  // (Read-only attribute), returns the visibility of the document, that is, the context environment of the currently visible element.  return ;
};
function useDocumentVisibility(): VisibilityState {
  const [documentVisibility, setDocumentVisibility] = useState(() =&gt; getVisibility());
  useEventListener(
    // Listen to this event    'visibilitychange',
    () =&gt; {
      setDocumentVisibility(getVisibility());
    },
    {
      target: () =&gt; document,
    },
  );
  return documentVisibility;
}

The above is the detailed content under the common Hook packaging example of React front-end DOM. For more information about React front-end DOM Hook packaging, please pay attention to my other related articles!