useMouse Hook

The useMouse hook is designed for tracking the mouse position within a specified element in React applications. It's enhanced to provide additional features such as offsetting the mouse position and avoiding edges of the screen, which is useful for tooltips and other floating elements.

Features

- Dynamic Mouse Position Tracking: Captures the mouse's x and y coordinates within the target element.
- Offset and Edge Avoidance: Supports offsetting the mouse position and adjusting it to avoid going off the screen edges.
- TypeScript Support: Strongly typed for better integration with TypeScript projects.
- Flexible and Customizable: Provides options for customizing offset values and tooltip dimensions.

Installation

$3

``bash
npm install @custom-react-hooks/use-mouse
`

or

`bash
yarn add @custom-react-hooks/use-mouse
`

$3

`sh
npm install @custom-react-hooks/all
`

or

`sh
yarn add @custom-react-hooks/all
`

Importing the Hook

The useMouse hook must be imported using a named import as shown below:

Named Import:
`javascript
import { useMouse } from '@custom-react-hooks/use-mouse';
`
This approach ensures that the hook integrates seamlessly into your project, maintaining consistency and predictability in how you use our package.

Usage

`typescript
import React, { useRef } from 'react';
import { useMouse } from '@custom-react-hooks/all';

const Tooltip = ({ mousePosition, isVisible }) => {
const { window, document } = useFrame();
const tooltipRef = useRef(null);

const positionStyles = useMemo(() => {
const style = { display: isVisible ? 'block' : 'none' };

if (tooltipRef.current) {
const tooltipRect = tooltipRef.current.getBoundingClientRect();

let newX = mousePosition.x;
let newY = mousePosition.y;

if (newX + tooltipRect.width > window.innerWidth) {
newX -= tooltipRect.width;
}

if (newY + tooltipRect.height > window.innerHeight) {
newY -= tooltipRect.height;
}

style.left = ${newX}px;
style.top = ${newY}px;
}

return style;
}, [mousePosition, isVisible]);

return (
ref={tooltipRef}
style={positionStyles}
>
X: {mousePosition.x},
Y: {mousePosition.y}