React Click Away Listener

A React component and hook for detecting clicks outside an element, compatible with React 18 and Next.js.

Thanks to

BatchNepal Consultancy : https://batchnepal.com

Support: [email protected]

Features

• 🏗️ Both component and hook versions
• 🌐 Works with React 18 and Next.js
• 📱 Supports mouse and touch events
• 🛡️ TypeScript support
• 🎯 Exclude specific elements from triggering
• ⏯️ Disable functionality when needed

Installation

npm install click-away-listener
# or
yarn add click-away-listener

Usage

Components version:

"use client"; // in next.js
import React from 'react';
import { ClickAwayListener } from 'click-away-listener';

function Dropdown() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Dropdown</button>
      
      {open && (
        <ClickAwayListener onClickAway={() => setOpen(false)}>
          <div className="dropdown">
            Dropdown Content
          </div>
        </ClickAwayListener>
      )}
    </div>
  );
}

Hooks Version:

"use client"; // in next.js
import React from 'react';
import useClickAway from 'click-away-listener';

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

  useClickAway(modalRef, onClose);

  return (
    <div ref={modalRef} className="modal">
      Modal Content
    </div>
  );
}

Bugs or Feature Requests

Please open pull request/issues at github or support ticket at [email protected]