https://github.com/therealparmesh/use-hovering

Simple, accessible React hook for tracking hover state.
https://github.com/therealparmesh/use-hovering

Last synced: 11 days ago
JSON representation

Simple, accessible React hook for tracking hover state.

• Host: GitHub
• URL: https://github.com/therealparmesh/use-hovering
• Owner: therealparmesh
• License: mit
• Created: 2020-01-18T23:54:03.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T09:56:56.000Z (over 1 year ago)
• Last Synced: 2024-08-09T10:31:45.513Z (3 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/use-hovering-example-pj682
• Size: 585 KB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-hovering`
• awesome-react-hooks-cn - `use-hovering`
• awesome-react-hooks - `use-hovering`
• awesome-react-hooks - `use-hovering`

README

        
# use-hovering 🧞

> Simple, accessible React hook for tracking hover state.

[![npm](https://img.shields.io/npm/v/use-hovering.svg)](https://www.npmjs.com/package/use-hovering)

[![npm](https://img.shields.io/npm/dt/use-hovering.svg)](https://www.npmjs.com/package/use-hovering)

## Install

```sh

npm install use-hovering

```

## Usage

### Plain

```jsx

import { useHovering } from 'use-hovering';

export const Example = () => {

  const ref = React.useRef();

  const hovering = useHovering(ref);

  return (

    


      Hover over me!{hovering && ' Hovering!'}

    

  );

};

```


### With delay

```jsx

import { useHovering } from 'use-hovering';

export const Example = () => {

  const ref = React.useRef();

  const hovering = useHovering(ref, {

    enterDelay: 250,

    exitDelay: 250,

  });

  return (

    


      Hover over me!{hovering && ' Hovering!'}

    

  );

};

```