react-use-clickout
It's a custom hook that handles an event after clicking out of the component
Get started
Alright, let's go. First you should install the library
Installing
Using yarn
yarn add react-use-clickout
Or npm
npm i react-use-clickout
Prefer to install it derectly on your project, not globally
Using
;; { const ref // it's to be assigned to the component reference bindHandler // it's a function to bind a callback handler = ; /** * The function passed as a callback will be called * if clicked out of the referenced component */ ; return <div> <p ref=ref> Referenced component </p> <div> It's out of the referenced component </div> </div> );} export default App;
Changing Events is possible. You can pass an array with the events to be listened. The default are mousedown
and touchstart
.
const ref bindClickout = ;
Although the name of this library is clickout, it isn't only about click event.
Pre requisites
It has the react@^16.8.0
and react-dom@^16.8.0
as peer-dependencies