openmrs-esm-core

O3 Framework / useOnClickOutside

Function: useOnClickOutside()

useOnClickOutside<T>(handler, active): RefObject<T>

Defined in: packages/framework/esm-react-utils/src/useOnClickOutside.ts:31

A React hook that detects clicks outside of a referenced element. Useful for implementing dropdown menus, modals, or any component that should close when clicking outside of it.

Type Parameters

T

T extends HTMLElement = HTMLElement

The type of HTML element the ref will be attached to.

Parameters

handler

(event) => void

A callback function invoked when a click occurs outside the referenced element.

active

boolean = true

Whether the outside click detection is active. Defaults to true. Set to false to temporarily disable the detection.

Returns

RefObject<T>

A React ref object to attach to the element you want to detect outside clicks for.

Example

import { useOnClickOutside } from '@openmrs/esm-framework';
function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const ref = useOnClickOutside<HTMLDivElement>(() => setIsOpen(false), isOpen);
  return (
    <div ref={ref}>
      {isOpen && <ul>...</ul>}
    </div>
  );
}

This site is open source. Improve this page.