@shwilliam/react-use-hover-direction
v0.1.0
Published
Custom hook to retrieve hover direction
Downloads
1
Readme
React useHoverDirection
Installation
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:
import React, {useRef} from 'react'
import {useHoverDirection} from '@shwilliam/react-use-hover-direction'
export const App = () => {
const boxRef = useRef()
const mouseDirection = useHoverDirection(boxRef)
return (
<>
<div ref={boxRef}>Hover me</div>
<p>
{mouseDirection.x} {mouseDirection.y}
</p>
</>
)
}
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. If you wish to work on this project:
- Fork this project
- Create a branch (
git checkout -b new-branch
) - Commit your changes (
git commit -am 'add new feature'
) - Push to the branch (
git push origin new-branch
) - Submit a pull request!