Skip to main content

​
Usage

Fires handler whenever the user clicks or touches outside the referenced element. 
import { useRef, useState } from 'react';
import { useClickOutside } from '@kivora/react';

function Dropdown() {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useClickOutside(ref, () => setOpen(false));

  return (
    <div ref={ref}>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      {open && <div className="dropdown-menu">Menu content</div>}
    </div>
  );
}

​
Parameters

​
ref
RefObject<T | null>
required
React ref object pointing to the element to monitor
​
handler
(event: MouseEvent | TouchEvent) => void
required
Callback function invoked when a click or touch occurs outside the element

​
Returns

void - This hook does not return a value.

​
Examples

import { useRef, useState } from 'react';
import { useClickOutside } from '@kivora/react';

function Modal({ onClose }: { onClose: () => void }) {
  const modalRef = useRef<HTMLDivElement>(null);
  
  useClickOutside(modalRef, onClose);

  return (
    <div className="overlay">
      <div ref={modalRef} className="modal">
        <h2>Modal Content</h2>
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
}

​
Popover menu

import { useRef, useState } from 'react';
import { useClickOutside } from '@kivora/react';

function Popover() {
  const [isOpen, setIsOpen] = useState(false);
  const popoverRef = useRef<HTMLDivElement>(null);

  useClickOutside(popoverRef, () => setIsOpen(false));

  return (
    <div ref={popoverRef}>
      <button onClick={() => setIsOpen(!isOpen)}>
        Options
      </button>
      {isOpen && (
        <div className="popover">
          <button>Edit</button>
          <button>Delete</button>
        </div>
      )}
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us