1.2.1 • Published 2 years ago

use-dom-outside-click v1.2.1

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

use-dom-outside-click

react hook to handle outside click events

Getting Started

You can install the module via npm or yarn:

npm i use-dom-outside-click --save
yarn add use-dom-outside-click

Example

import { useOutsideClick } from 'use-dom-outside-click';
const [isPanelOpen, setIsPanelOpen] = useState(false)

const triggerRef = useRef<HTMLButtonElement>();
const panelRef= useRef<HTMLDivElement>();

// third argument is optional
useOutsideClick(panelRef, () => setIsPanelOpen(false), [triggerRef]);

const handleClick = () => {
  setIsPanelOpen(open => !open)
}

<Popover>
  <Popover.Button ref={triggerRef} onClick={handleClick}>
    // button code
  </Popover.Button>
  <Popover.Panel ref={panelRef} isOpen={isPanelOpen}>
    // panel code
  </Popover.Panel>
</Popover>

chrome_7DgcqHreNp

Reference

useOutsideClick(elementRef, callback, [...exceptionsRefs]);
  • elementRef - reference of the element from which you want to detect the outside click
  • callback - function to execute when clicked outside the element
  • exceptionsRefs (optional) - array of references in which you want to prevent the callback from being executed if they are clicked
1.2.0

2 years ago

1.2.1

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago