Dom.En US - Hooks — ContextQMD

Hooks of DOM specification

Most of the DOM Hooks will receive the target parameter, which indicates the element to be processed.

target supports three types React.MutableRefObject, HTMLElement, () => HTMLElement.

Support React.MutableRefObject

export default () => {
  const ref = useRef(null);
  const isHovering = useHover(ref);
  return <div ref={ref}>{isHovering ? 'hover' : 'leaveHover'}</div>;
};

Support HTMLElement

export default () => {
  const isHovering = useHover(document.getElementById('test'));
  return <div id="test">{isHovering ? 'hover' : 'leaveHover'}</div>;
};

Support () => HTMLElement, generally applicable in SSR scenarios

export default () => {
  const isHovering = useHover(() => document.getElementById('test'));
  return <div id="test">{isHovering ? 'hover' : 'leaveHover'}</div>;
};

In addition, the target of DOM Hooks supports dynamic changes. for example:

export default () => {
  const [boolean, { toggle }] = useBoolean();

  const ref = useRef(null);
  const ref2 = useRef(null);

  const isHovering = useHover(boolean ? ref : ref2);
  return (
    <>
      <div ref={ref}>{isHovering ? 'hover' : 'leaveHover'}</div>
      <div ref={ref2}>{isHovering ? 'hover' : 'leaveHover'}</div>
    </>
  );
};