React Hook Click Away

A React Hook for detecting click events outside of an element and fires a callback function.

Installation

npm

npm install react-hook-click-away

Yarn

yarn add react-hook-click-away

pnpm

pnpm add react-hook-click-away

Usage

import React, { useRef } from 'react';
import { useClickAway } from 'react-hook-click-away';

function App() {
  const ref = useRef(null);

  useClickAway(ref, () => {
    console.log('Clicked Away!');
  });

  return (
    <div ref={ref}>
      <p>Hello, world!</p>
    </div>
  );
}

Alternatively, you can use the ClickAway component directly to wrap the component you wish to detect clicks outside of.

import ClickAway from 'react-hook-click-away';

function App() {
  const handleClickAway = () => {
    console.log('Clicked Away!');
  };

  return (
    <ClickAway onClickAway={handleClickAway}>
      <p>Hello, world!</p>
    </ClickAway>
  );
}

License

MIT