https://github.com/tflx/on-click-outside

Identifies a click outside of your component. Good for pop-overs, modals, and tooltips.
https://github.com/tflx/on-click-outside

Last synced: about 2 months ago
JSON representation

Identifies a click outside of your component. Good for pop-overs, modals, and tooltips.

• Host: GitHub
• URL: https://github.com/tflx/on-click-outside
• Owner: tflx
• Created: 2024-01-26T11:34:35.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-01-29T08:31:32.000Z (11 months ago)
• Last Synced: 2024-11-07T00:08:17.206Z (2 months ago)
• Language: TypeScript
• Size: 1.81 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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.

[See demo](https://tflx.github.io/on-click-outside)

## Usage

1. Import the component:

```typescript

import 'on-click-outside.ts';

import { ON_CLICK_OUTSIDE } from './on-click-outside.ts';

```

2. Use the component in your HTML:

```html

  

```

3. Add an event listener for the `ON_CLICK_OUTSIDE` event:

```typescript

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.