useHover ​
Hook that defines the logic when hovering an element
sensors
test coverage
Last changed: last month
Installation ​
Library
CLI
Manual
typescript
import { useHover } from '@siberiacancode/reactuse';
Usage ​
typescript
const hovering = useHover(ref, () => console.log('callback'));
// or
const hovering = useHover(ref, options);
// or
const [ref, hovering] = useHover(() => console.log('callback'));
// or
const [ref, hovering] = useHover(options);
Demo ​
Api ​
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to be hovered |
callback? | (event: Event) => void | - | The callback function to be invoked on mouse enter |
Returns
boolean
Parameters
Name | Type | Default | Note |
---|---|---|---|
target | HookTarget | - | The target element to be hovered |
options.onEntry? | (event: Event) => void | - | The callback function to be invoked on mouse enter |
options.onLeave? | (event: Event) => void | - | The callback function to be invoked on mouse leave |
Returns
boolean
Parameters
Name | Type | Default | Note |
---|---|---|---|
callback? | (event: Event) => void | - | The callback function to be invoked on mouse enter |
Returns
{ ref: StateRef<Target> } & UseHoverReturn
Parameters
Name | Type | Default | Note |
---|---|---|---|
options.onEntry? | (event: Event) => void | - | The callback function to be invoked on mouse enter |
options.onLeave? | (event: Event) => void | - | The callback function to be invoked on mouse leave |
Returns
{ ref: StateRef<Target> } & UseHoverReturn
Type declaration ​
typescript
import type { HookTarget } from '@/utils/helpers';
import type { StateRef } from '../useRefState/useRefState';
export interface UseHoverOptions {
/** The on entry callback */
onEntry?: (event: Event) => void;
/** The on leave callback */
onLeave?: (event: Event) => void;
}
export interface UseHoverReturn {
value: boolean;
}
export interface UseHover {
(target: HookTarget, callback?: (event: Event) => void): boolean;
(target: HookTarget, options?: UseHoverOptions): boolean;
<Target extends Element>(
callback?: (event: Event) => void,
target?: never
): { ref: StateRef<Target> } & UseHoverReturn;
<Target extends Element>(
options?: UseHoverOptions,
target?: never
): { ref: StateRef<Target> } & UseHoverReturn;
}
Source ​
Source • DemoContributors ​
D
S
H