Skip to content

shwilliam/react-use-hover-direction

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React useHoverDirection

Example usage

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:

  1. Fork this project
  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!

About

👋 Custom hook to retrieve hover direction

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published