useClickAway

GitHub

Custom hook that triggers a callback when a user clicks outside the referenced element. It handles portal elements, scrollbar clicks, and touch interactions intelligently.

Installation

npx sse-hooks add use-click-away

yarn dlx sse-hooks add use-click-away

pnpm dlx sse-hooks add use-click-away

deno run -A npm:sse-hooks add use-click-away

bunx sse-hooks add use-click-away

Usage

example.ts

import { useClickAway } from "./{hooks file}";

const handleClickAway = () => {
  console.log("Clicked outside!");
  setOpen(false);
};

const { ref, listenerProps } = useClickAway(handleClickAway);

return (
  <div ref={ref} {...listenerProps}>
    I will detect clicks outside of me.
  </div>
);

API

Parameters

Prop	Default	Type
`options`	`{}`	`UseClickAwayOptions` Configuration options for the hook.
`onClickAway`	-	`(event: MouseEvent \| TouchEvent) => void` The callback function to be called when a click outside is detected.

Returns

Return Value	Default	Type
`listenerProps`	-	`Record<string, any>`
`ref`	-	`Ref<Element>`

Types Aliases

No specific type aliases defined for this component.

Changelog

c165d — feat: enhance useRoleGuard and useSSR hooks with additional options and documentation

30da4 — feat: add new hooks and their metadata

2bd46 — feat: add useBattery and useClickAway hooks with supporting utilities

useClickAnyWhere

Custom hook that handles click events anywhere on the document.

useAutoSave

A robust hook for auto-saving form data with debouncing, race-condition handling, and lifecycle safety. It monitors the `data` state and triggers the `onSave` callback after a specified `delay` of inactivity. It also provides a smart `onChange` handler that adapts to both React Events and direct values.