Hook useHover de React

Introducción

En este laboratorio, exploraremos la implementación de un hook personalizado llamado useHover en React. Este hook manejará el evento de pasar el cursor sobre un componente envuelto y actualizará el estado en consecuencia. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear y usar hooks personalizados en React para mejorar la funcionalidad de tus componentes.

Skills Graph

Hook useHover de React

index.html y script.js ya se han proporcionado en la máquina virtual. En general, solo es necesario agregar código a script.js y style.css.

Este código crea un hook personalizado que maneja el pasar el cursor sobre un componente envuelto.

Para usar el hook:

• Utilice useState() para crear una variable que almacene el estado de hovering.
• Utilice useCallback() para memoizar dos funciones de controlador que actualicen el estado.
• Utilice useCallback() para crear una referencia de devolución de llamada y crear o actualizar los oyentes para los eventos 'mouseover' y 'mouseout'.
• Utilice useRef() para llevar un registro del último nodo pasado a callbackRef para poder quitar sus oyentes.

const useHover = () => {
  const [isHovering, setIsHovering] = React.useState(false);
  const handleMouseOver = React.useCallback(() => setIsHovering(true), []);
  const handleMouseOut = React.useCallback(() => setIsHovering(false), []);
  const nodeRef = React.useRef();
  const callbackRef = React.useCallback(
    (node) => {
      if (nodeRef.current) {
        nodeRef.current.removeEventListener("mouseover", handleMouseOver);
        nodeRef.current.removeEventListener("mouseout", handleMouseOut);
      }
      nodeRef.current = node;
      if (nodeRef.current) {
        nodeRef.current.addEventListener("mouseover", handleMouseOver);
        nodeRef.current.addEventListener("mouseout", handleMouseOut);
      }
    },
    [handleMouseOver, handleMouseOut]
  );

  return [callbackRef, isHovering];
};

Este es un ejemplo de uso del hook:

const MyApp = () => {
  const [hoverRef, isHovering] = useHover();
  return <div ref={hoverRef}>{isHovering ? "Hovering" : "Not hovering"}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio del Hook useHover de React. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.