Skip to main content

useHover()

The useHover hook detects whether a specified DOM element is being hovered over by the mouse. It returns a ref to attach to the element and a boolean indicating the hover state. This is useful for creating interactive UI elements that respond to mouse hover events.

Import​

import { useHover } from "reactuals";

Demo​

Loading...

Usage​

import React from "react";
import { useHover } from "reactuals";

export const Component = () => {
  const [ref, hovered] = useHover();

  return (
    <div>
      <div
        ref={ref}
        style={{
          width: "100px",
          height: "100px",
          background: hovered ? "lightblue" : "lightgray",
        }}
      >
        Hover me!
      </div>
      <p>Hover state: {hovered ? "Hovered" : "Not hovered"}</p>
    </div>
  );
};