A React hook library that triggers a callback when the user clicks outside of the target component(s) area.
Useful for dropdown menu, modal window, tooltip popup, etc.
Install & Import:
# Yarn
$ yarn add react-cool-onclickoutside
# NPM
$ npm i react-cool-onclickoutside –save
mport React, { useState } from “react”;
import useOnclickOutside from “react-cool-onclickoutside”;
Basic Usage:
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> ); };
Preview:
Download Details:
Author: wellyshen
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/wellyshen/react-cool-onclickoutside
License: MIT