<web-share>

A custom element that implements the Web Share API to share user-defined data.

Source code & documentation

Demo


Open the browser's console to watch emitted events with more info about the shared data.
Source code
<web-share
  share-url="https://developer.mozilla.org"
  share-title="MDN"
  share-text="Learn web development on MDN!"
></web-share>

<script>
  const el = document.querySelector('web-share');

  // Share some files
  el.shareFiles = [
    new File(['file content'], 'file-1.txt', { type: 'text/plain' }),
    new File(['file content'], 'file-2.txt', { type: 'text/plain' })
  ];

  // Listen to emitted events
  el.addEventListener('web-share:success', evt => {
    console.log('Share succeeded', evt.detail.shareData);
  });

  el.addEventListener('web-share:error', evt => {
    console.log('Share errored', evt.detail.error);
  });

  el.addEventListener('web-share:abort', evt => {
    console.log('Share aborted', evt.detail.error);
  });
</script>

License

The MIT License (MIT)

Share Error