on-click-outside-element

Handle outside events with a custom element

Usage no npm install needed!

<script type="module">
  import onClickOutsideElement from 'https://cdn.skypack.dev/on-click-outside-element';
</script>

README

On Click Outside - Custom Element

<!-- example html -->
<on-click-outside>
  <dialog></dialog>
</on-click-outside>
<button>Click Me</button>

<script defer>
  document.querySelector('on-click-outside')
    .addEventListener('clickoutside', (ev) => {
      console.log('clicked outside', ev.detail.sourceEvent);
    });
</script>

Script tag

Publish to NPM
Put a script tag similar to this <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm install on-click-outside --save
Put a script tag similar to this <script src='node_modules/my-component/dist/onclickoutside.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

Run npm install my-component --save
Add an import to the npm packages import my-component;
Then you can use the element anywhere in your template, JSX, html etc