bassettsj / on-click-outside

Web Component (built with Stencil) to handle when click happens outside this element.

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