therealparmesh/use-hovering

Simple, accessible React hook for tracking hover state.

use-hovering 🧞

Simple, accessible React hook for tracking hover state.

Install

npm install use-hovering

Usage

Plain

import { useHovering } from 'use-hovering';

export const Example = () => {
  const ref = React.useRef();
  const hovering = useHovering(ref);

  return (
    <div ref={ref} tabIndex={0}>
      Hover over me!{hovering && ' Hovering!'}
    </div>
  );
};

With delay

import { useHovering } from 'use-hovering';

export const Example = () => {
  const ref = React.useRef();
  const hovering = useHovering(ref, {
    enterDelay: 250,
    exitDelay: 250,
  });

  return (
    <div ref={ref} tabIndex={0}>
      Hover over me!{hovering && ' Hovering!'}
    </div>
  );
};