https://github.com/andrewbranch/react-use-hover

State hook to determine whether a React element is being hovered
https://github.com/andrewbranch/react-use-hover

hooks hooks-api-react react

Last synced: 2 months ago
JSON representation

State hook to determine whether a React element is being hovered

• Host: GitHub
• URL: https://github.com/andrewbranch/react-use-hover
• Owner: andrewbranch
• License: mit
• Created: 2019-01-21T07:24:56.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T16:05:03.000Z (about 2 years ago)
• Last Synced: 2024-10-26T00:45:49.336Z (3 months ago)
• Topics: hooks, hooks-api-react, react
• Language: TypeScript
• Size: 632 KB
• Stars: 59
• Watchers: 2
• Forks: 6
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-use-hover [![Build Status](https://travis-ci.com/andrewbranch/react-use-hover.svg?branch=master)](https://travis-ci.com/andrewbranch/react-use-hover) [![NPM Version](https://img.shields.io/npm/v/react-use-hover.svg)](https://www.npmjs.com/package/react-use-hover) [![Minified size](https://img.shields.io/bundlephobia/min/react-use-hover.svg)](https://www.npmjs.com/package/react-use-hover) [![Greenkeeper badge](https://badges.greenkeeper.io/andrewbranch/react-use-hover.svg)](https://greenkeeper.io/)

A React state hook to determine whether a React element is being hovered.

## Installation

```

npm install react-use-hover

```

## Usage

```js

import useHover from 'react-use-hover';

function Tooltip() {

  const [isHovering, hoverProps] = useHover();

  return (

    <>

      Hover me

      

        I’m a lil popup or something!

      

    >

  );

}

```

### Options

```js

useHover({

  mouseEnterDelayMS,

  mouseLeaveDelayMS

})

```

- **`mouseEnterDelayMS: number = 200`**. The number of milliseconds to delay before setting the `isHovering` state to `true`. (Mousing back out during this delay period will cancel the state change.)

- **`mouseLeaveDelayMS: number = 0`**. The number of milliseconds to delay before setting the `isHovering` state to `false`. (Mousing back in during this period will cancel the state change.)

## Testing

```bash

# Run once, with coverage

npm run test

# Watch mode

npm run test -- --watch

# Do whatever you want

npx jest src # --any --jest --options

```

## Contributing

PRs welcome! Please ensure you `npm run build` and commit before pushing (to run prettier) and maintain 100% test coverage.