use-hover
v4.7.0arrow_drop_downv4.7.0
STATUS
Passing
DOWNLOADS
251
VISIBILITY
Public
PUBLISHED
6 years ago
SIZE
N/A
1 contributor
Like
Install use-hover as a package?
Copied
npm i @bit/giladshoham.react-hooks.use.use-hover
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout
chevron_left
chevron_right
useHover
and useHoverDirty
React UI sensor hooks that track if some element is being hovered by a mouse.
useHover
accepts a React element or a function that returns one,useHoverDirty
accepts React ref.useHover
sets reactonMouseEnter
andonMouseLeave
events,useHoverDirty
sets DOMonmouseover
andonmouseout
events.
Usage
import {useHover} from 'react-use';
const Demo = () => {
const element = (hovered) =>
<div>
Hover me! {hovered && 'Thanks!'}
</div>;
const [hoverable, hovered] = useHover(element);
return (
<div>
{hoverable}
<div>{hovered ? 'HOVERED' : ''}</div>
</div>
);
};
Reference
const [newReactElement, isHovering] = useHover(reactElement);
const [newReactElement, isHovering] = useHover((isHovering) => reactElement);
const isHovering = useHoverDirty(ref);