react-useoutside-handler

This React hook allows you to detect clicks outside of a specified element.

Installation

Install using NPM:

npm install react-useoutside-handler --save

Install using Yarn:

yarn add react-useoutside-handler

Usage

Import:

import useOutside from 'react-useoutside-handler';

useOutside:

useOutside(ref, handler);

Example:

import React, { useRef } from 'react';
import useOutside from 'react-useoutside-handler';

const HelloWorldComponent = () => {
  const refHelloWorldElement = useRef(null);

  useOutside(refHelloWorldElement, () => alert('You clicked outside of Hello world element'));

  return (
    <div>
      <div ref={refHelloWorldElement} className="hello-world-element">Hello World</div>
    </div>
  );
};