@shelf/react-outside-click

React library for handling outside clicks of a specified element.

Installation

Install the library using npm:

$ npm install @shelf/react-outside-click

Install the library using yarn:

$ yarn add @shelf/react-outside-click

Usage

ClickOutsideProvider

ClickOutsideProvider is a component that wraps its children and detects clicks outside of its container element.

import { ClickOutsideProvider } from '@shelf/react-outside-click';

const Component = () => {
  const onOutsideClick = () => {
    console.log('Clicked outside')
  };

  return (
    <ClickOutsideProvider onOutsideClick={onOutsideClick}>
      <span>Shelf.io</span>
    </ClickOutsideProvider>
  );
};

Props

onOutsideClick

Type: function (required)

A function that will be called when an outside click is detected.

disabled

Type: boolean (optional)

If set to true, the outside click detection will be disabled.

mouseEvent

Type: string (optional)

The mouse event to listen for. Defaults to 'mousedown'

listenerOptions

Type: boolean | AddEventListenerOptions (optional)

Additional options for the event listener. By default, it uses capture phase.This behavior ensures that the click outside event is captured before any click events on the descendants, even if stopPropagation is used. See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

useClickOutside

useClickOutside is a custom hook that attaches an outside click event listener to a specified element.

import { useRef } from 'react'
import { useClickOutside } from '@shelf/react-outside-click';

const Component() {
  const ref = useRef(null)

  const handleClickOutside = () => {
    console.log('Clicked outside')
  }

  useOnClickOutside(ref, handleClickOutside, {mouseEvent: 'mouseup'})

  return <span ref={ref}>Shelf.io</span>
}