use-element-hover
v1.0.0
Published
A custom React hook for managing hover state.
Downloads
10
Maintainers
Readme
Use Element Hover
A custom React hook for managing hover state. This hook provides an easy way to track whether an element is being hovered and applies event handlers for mouse over and mouse leave events.
Installation
You can install the package via npm:
npm install use-element-hover
Or using yarn:
yarn add use-element-hover
Usage
To use the use-element-hover
hook, import it into your component and spread the returned event handlers onto the desired element.
Example
import React from 'react';
import { useHover } from 'use-element-hover';
const HoverInput = () => {
const { isHovering, handlers } = useHover();
return (
<div>
<input
type="text"
{...handlers} // Spread the handlers into the input
placeholder="Hover over me!"
/>
{isHovering && <p>Input is being hovered!</p>}
</div>
);
};
export default HoverInput;