useClickOutside

Hook to handle click events outside the specified target element(s)

elements

necessary

test coverage

Last changed: 24 days ago

Installation

Library

CLI

Manual

import { useClickOutside } from '@siberiacancode/reactuse';

Usage

useClickOutside(ref, () => console.log('click outside'));
// or
const { ref } = useClickOutside<HTMLDivElement>(() => console.log('click outside'));

## Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element(s) to detect outside clicks for
callback	(event: Event) => void	-	The callback to execute when a click outside the target is detected

Returns

void

Parameters

Name	Type	Default	Note
callback	(event: Event) => void	-	The callback to execute when a click outside the target is detected

Returns

{ ref: StateRef<Target> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseClickOutside {
  (target: HookTarget, callback: (event: Event) => void): void;

  <Target extends Element>(
    callback: (event: Event) => void,
    target?: never
  ): {
    ref: StateRef<Target>;
  };
}

Source

Source • Demo

Contributors

D

debabin

H

hywax

Y

yrsluv