therealparmesh / use-hovering

Simple, accessible React hook for tracking hover state.

Home Page:https://codesandbox.io/s/use-hovering-example-pj682

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

use-hovering 🧞

Simple, accessible React hook for tracking hover state.

npm npm

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>
  );
};

About

Simple, accessible React hook for tracking hover state.

https://codesandbox.io/s/use-hovering-example-pj682

License:MIT License


Languages

Language:JavaScript 100.0%