Share button

Share button using Web Share API.

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/button-share": "..."
    }
  }
</script>
<script type="module">
  import ButtonShare from '@w0s/button-share';

  for (const targetElement of document.querySelectorAll('.js-button-share')) {
    new ButtonShare(targetElement);
  }
</script>

<button type="button" class="js-button-share"
  data-text="Message text"
  data-title="Page title"
  data-url="/path/to"
>Share</button>

Attributes

type [optional]

This attribute is not required, but it is recommended to include type="button". According to the description in the HTML specification, The missing value default and invalid value default are the Submit Button state.

data-text [optional]

Arbitrary text that forms the body of the message being shared. If omitted, it will be an empty string.

data-title [optional]

The title of the document being shared. May be ignored by the target. If omitted, the value of document.title will be set.

data-url [optional]

A URL string referring to a resource being shared. The url can contain a relative-URL string. If omitted, the value of document.URL will be set.