useClickAway

Custom hook that triggers a callback when a user clicks outside the referenced element.

Installation

npx sse-tool add use-click-away

npm install sse-hooks

Usage

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>
);

import { useClickAway } from "sse-hooks";

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

Name	Type	Description
onClickAway	`Function`	The callback function to be called when a click outside is detected.
options	`UseClickAwayOptions`	Configuration options for the hook.

Return Value

Returns Object.

An object containing the ref to attach to the target element and listenerProps to spread.

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.