https://github.com/shwilliam/react-use-hover-direction
👋 Custom hook to retrieve hover direction
https://github.com/shwilliam/react-use-hover-direction
hook hover mouseover react
Last synced: 7 months ago
JSON representation
👋 Custom hook to retrieve hover direction
- Host: GitHub
- URL: https://github.com/shwilliam/react-use-hover-direction
- Owner: shwilliam
- License: mit
- Created: 2020-06-03T20:17:18.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-03-26T20:19:05.000Z (almost 4 years ago)
- Last Synced: 2025-03-18T06:08:10.443Z (11 months ago)
- Topics: hook, hover, mouseover, react
- Language: TypeScript
- Homepage:
- Size: 457 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React useHoverDirection
## Installation
```shell
npm i @shwilliam/react-use-hover-direction
```
## Usage
Import `useHoverDirection` and call it in your React component with a `ref` to
the target component. For example:
```jsx
import React, {useRef} from 'react'
import {useHoverDirection} from '@shwilliam/react-use-hover-direction'
export const App = () => {
const boxRef = useRef()
const mouseDirection = useHoverDirection(boxRef)
return (
<>
Hover me
{mouseDirection.x} {mouseDirection.y}
>
)
}
```
## Development
To start local development, simply install npm dependencies (`npm i`) and run
`npm run dev` to watch ts files in `src/`. Built files can be found in `dist/`.
## Demo
To run the demo, ensure you have run the build script and have a `dist` dir in
your project root. Then run `npm run demo:setup` to copy these to the demo.
Navigate to the demo and install its dependencies (`cd demo && npm i`). You can
now start the demo app locally by running `npm start`.
## Contributing
This project is open to and encourages contributions! Feel free to discuss any
bug fixes/features in the [issues](https://github.com/shwilliam/react-use-hover-direction/issues).
If you wish to work on this project:
1. Fork [this project](https://github.com/shwilliam/react-use-hover-direction)
2. Create a branch (`git checkout -b new-branch`)
3. Commit your changes (`git commit -am 'add new feature'`)
4. Push to the branch (`git push origin new-branch`)
5. [Submit a pull request!](https://github.com/shwilliam/react-use-hover-direction/pull/new/master)