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