Package Exports

click-away-listener
click-away-listener/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (click-away-listener) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: support@batchnepal.com

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 support@batchnepal.com