Skip to content

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

NameTypeDefaultNote
targetHookTarget-The target element to be hovered
callback?(event: Event) => void-The callback function to be invoked on mouse enter

Returns

boolean

Parameters

NameTypeDefaultNote
targetHookTarget-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

NameTypeDefaultNote
callback?(event: Event) => void-The callback function to be invoked on mouse enter

Returns

{ ref: StateRef<Target> } & UseHoverReturn

Parameters

NameTypeDefaultNote
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 • Demo

Contributors ​

D
debabin
debabin
S
str0yka
str0yka
H
hywax
hywax

Released under the MIT License.