visit
Custom React Hook For Tracking Clicks Outside of the Component by@welly
1,296 reads
Custom React Hook For Tracking Clicks Outside of the Component
by wellyJanuary 26th, 2020
Too Long; Didn't Read
React hook is a React hook to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. Uses passive event listeners to improve scrolling performance. Ignores certain elements during the event loop by the ignore-onclickoutside CSS class name. Disabling the event listener is a feature that can only be set as true once you set it as true, the callback won't be triggered.Company Mentioned
is a React to trigger callback when user clicks outside of the target component(s) area. It's a useful logic for UI interaction design (IxD) like dismiss a dropdown menu, modal or tooltip etc. Help you guys ❤️ it.
⚡️ Live demo:
Features
- 🎣 Listens for clicks outside based on React .
- 👯♀️ Supports multiple refs to cover more use cases.
- 🧻 Uses to improve scrolling performance.
- ⛔️ Scrollbar can be excluded from the callback of outside clicks.
- 🙈 during the event loop.
- 🙉 Enables you to stop listening for outside clicks when needed.
- 🪟 for better DX.
- 🔩 Supports custom refs for .
- 📜 Supports type definition.
- 🗄️ Server-side rendering friendly.
- 🦔 Tiny size (). No external dependencies, aside for the react.
Quick Start ()
Common use case.import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";
const Dropdown = () => {
const [openMenu, setOpenMenu] = useState(false);
const ref = useOnclickOutside(() => {
setOpenMenu(false);
});
const handleClickBtn = () => {
setOpenMenu(!openMenu);
};
return (
<div>
<button onClick={handleClickBtn}>Button</button>
{openMenu && <div ref={ref}>Menu</div>}
</div>
);
};import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";
const App = () => {
const [showTips, setShowTips] = useState(true);
const ref = useOnclickOutside(() => {
setShowTips(false);
});
return (
<div>
{showTips && (
<>
<div ref={ref}>Tooltip 1</div>
<div ref={ref}>Tooltip 2</div>
</>
)}
</div>
);
};Ignore Elements by CSS Class Name
You can tell to ignore certain elements during the event loop by the ignore-onclickoutside CSS class name. If you want explicit control over the class name, use the ignoreClass option.
import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";
// Use the default CSS class name
const App = () => {
const ref = useOnclickOutside(() => {
// Do something...
});
return (
<div>
<div ref={ref}>I'm a 🍕</div>
<div>Click me will trigger the event's callback</div>
<div className="ignore-onclickoutside">
Click me won't trigger the event's callback
</div>
</div>
);
};
// Use your own CSS class name
const App = () => {
const ref = useOnclickOutside(
() => {
// Do something...
},
{ ignoreClass: "my-ignore-class" }
);
return (
<div>
<div ref={ref}>I'm a 🍕</div>
<div>Click me will trigger the event's callback</div>
<div className="my-ignore-class">
Click me won't trigger the event's callback
</div>
</div>
);
};Disabling the Event Listener
In case you want to disable the event listener for performance reasons or fulfill some use cases. We provide the disabled option for you. Once you set it as true, the callback won’t be triggered.
import { useState } from "react";
import useOnclickOutside from "react-cool-onclickoutside";
const App = () => {
const [disabled, setDisabled] = useState(false);
const ref = useOnclickOutside(
() => {
// Do something...
},
{ disabled }
);
const handleBtnClick = () => {
setDisabled(true);
};
return (
<div>
<button onClick={handleBtnClick}>
Stop listening for outside clicks
</button>
<div ref={ref}>I'm a 🍎</div>
</div>
);
};Thanks for reading, for more usage details checkout the project's GitHub page: You can also install this package is distributed via .
$ yarn add react-cool-onclickoutside
# or
$ npm install --save react-cool-onclickoutsideL O A D I N G
. . . comments & more!
. . . comments & more!
