In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the “useHover” hook, one of the many carefully crafted hooks available in the collection of React custom hooks.
Github: https://github.com/sergeyleschev/react-custom-hooks
import { useState } from "react"
import useEventListener from "../useEventListener/useEventListener"
export default function useHover(ref) {
const [hovered, setHovered] = useState(false)
useEventListener("mouseover", () => setHovered(true), ref.current)
useEventListener("mouseout", () => setHovered(false), ref.current)
return hovered
}
This lightweight hook leverages the useState and useEventListener hooks from React to keep track of the hover state. By simply passing a ref to the useHover hook, you can start receiving accurate hover events. The hook listens for “mouseover” and “mouseout” events, updating the hovered state accordingly.
One of the key advantages of useHover is its simplicity and reusability. By encapsulating the hover logic within the hook, you can easily use it across multiple components without duplicating code. This promotes clean and maintainable code, saving you time and effort in the long run.
UseHover can be used in a variety of scenarios. Whether you need to highlight an element on hover, trigger additional actions, or dynamically change styles, this custom hook has got you covered. It provides a seamless way to enhance the interactivity and user experience of your React components.
import { useRef } from "react"
import useHover from "./useHover"
export default function HoverComponent() {
const elementRef = useRef()
const hovered = useHover(elementRef)
return (
<div
ref={elementRef}
style={{
backgroundColor: hovered ? "blue" : "red",
width: "100px",
height: "100px",
position: "absolute",
top: "calc(50% - 50px)",
left: "calc(50% - 50px)",
}}
/>
)
}
To demonstrate its power, consider the HoverComponent example above. By applying the useHover hook to the elementRef, the background color of the div dynamically changes between blue and red depending on the hover state. This simple yet effective implementation showcases the potential of useHover in creating interactive and engaging UI components.
Full Version | React Custom Hooks:
https://dev.to/sergeyleschev/supercharge-your-react-projects-with-custom-hooks-pl4
