on-click-outside-web-component
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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.

See demo

Usage

  1. Import the component:
import 'on-click-outside.ts';
import { ON_CLICK_OUTSIDE } from './on-click-outside.ts';
  1. Use the component in your HTML:
<on-click-outside>
  <!-- Your content here -->
</on-click-outside>
  1. 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.

Package Sidebar

Install

npm i on-click-outside-web-component

Weekly Downloads

1

Version

1.0.0

License

ISC

Unpacked Size

6.3 kB

Total Files

9

Last publish

Collaborators

  • tflx