on-click-outside-web-component
v1.0.0
Published
Identifies a click outside of your component. Good for pop-overs, modals, and tooltips.
Downloads
10
Maintainers
Readme
OnClickOutside Web Component
The on-click-outside
is a custom web component built using LitElement. It dispatches a custom event ON_CLICK_OUTSIDE
whenever a click is detected outside the content of this component.
Usage
- Import the component:
import 'on-click-outside.ts';
import { ON_CLICK_OUTSIDE } from './on-click-outside.ts';
- Use the component in your HTML:
<on-click-outside>
<!-- Your content here -->
</on-click-outside>
- Add an event listener for the
ON_CLICK_OUTSIDE
event:
document.querySelector('on-click-outside').addEventListener(ON_CLICK_OUTSIDE, () => {
console.log('Clicked outside!');
});
Details
The component uses the connectedCallback
and disconnectedCallback
lifecycle methods to add and remove a click event listener on the body of the document. When a click event is fired, it checks if the click was outside the content of the component. If it was, it dispatches the ON_CLICK_OUTSIDE
event.