useHover

Tracks the hover state of an element.

Installation

npx rabbithook@latest add use-hover

Usage

Typescript

App.tsx

import useHover from "@/hooks/use-hover";

function Component() {
  const ref = useRef<HTMLDivElement>(null);

  const isHovered = useHover(ref);

  return (
    <div ref={ref}>isHovered: { isHovered }</div>
  )
}

Javascript

App.jsx

import useHover from "@/hooks/use-hover";

function Component() {
  const ref = useRef();

  const isHovered = useHover(ref);

  return (
    <div ref={ref}>
      isHovered: { isHovered ? "Yes" : "No" }
    </div>
  )
}

Code

Typescript

use-hover.ts

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useHover(ref: Element) {
  const [hovered, setHovered] = useState(false);

  useEventListener("mouseover", () => setHovered(true), ref);
  useEventListener("mouseout", () => setHovered(false), ref);

  return hovered;
}

export default useHover;

Javascript

use-hover.js

import { useState } from "react";
import useEventListener from "../use-event-listener";

function useHover(ref) {
  const [hovered, setHovered] = useState(false);

  useEventListener("mouseover", () => setHovered(true), ref);
  useEventListener("mouseout", () => setHovered(false), ref);

  return hovered;
}

export default useHover;