ShareButton

Description

Uses the Navigator API to share data. Progressively enhances according to browser support.

• If the browser cannot share the provided data:
  • url - uses the the Clipboard API to copy
  • files - uses a hidden anchor element to download the first file in the files array
• If no JavaScript:
  • button is disabled
  • url - displayed after the button

props

• classNoscript - noscript class
• class
• id
• shareData - MDN Reference
• title

slots

name	purpose	default value
default	default	Share
complete	displays after copy is complete	Copied

example

<script lang="ts">
    import { ShareButton } from "drab";

    let fileInput: HTMLInputElement;

    let fileShareData: ShareData;

    const onInput = () => {
        if (fileInput.files) {
            fileShareData.files = [fileInput.files[0]];
        }
    };
</script>

<ShareButton
    class="button button-primary mb-8"
    shareData={{
        text: "Check out this page: ",
        title: "drab",
        url: "https://drab.robino.dev",
    }}
>
    Share URL
</ShareButton>

<div>
    <label class="label" for="fileInput">Upload File</label>
    <input
        type="file"
        id="fileInput"
        class="input mb-4"
        bind:this={fileInput}
        on:input={onInput}
    />
    <ShareButton class="button button-primary" bind:shareData={fileShareData}>
        Share File
    </ShareButton>
</div>