@zachleat/webcare-webshare

1.0.3 • Public • Published

<webcare-webshare> Web Component

A web component that uses the Web Share API to share a web site, falling back (on Desktop usually) to Copy to Clipboard.

Used on the registration flow for conf.11ty.dev.

Features

  • Defaults to copy URL when Web Share API is not available.
  • Optionally override with your own copy-able content.
  • Custom button text when Web Share API is not available.

Installation

You can install via npm (@zachleat/webcare-webshare) or download the webcare-webshare.js JavaScript file manually.

npm install @zachleat/webcare-webshare --save

Add webcare-webshare.js to your site’s JavaScript assets.

Usage

Use share-text and share-url per the Web Share API. The button is un-disabled when initialized.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Custom button text when Web Share API not available.

Copy to clipboard workflow only. Use the label-copy (Before) and label-after-copy (After) attributes.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" label-copy="📋 Copy your ticket URL" label-after-copy="✅ Copied to Clipboard">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Set custom share content for copying.

Copy to clipboard workflow only. Use copy-text to override share-url as the default content that is copied when using Copy to Clipboard.

<webcare-webshare share-text="I am going to the 11ty Conference! #11ty #11tyConf" share-url="https://conf.11ty.dev/" copy-text="Go to https://conf.11ty.dev/">
	<button disabled>Share your ticket!</button>
</webcare-webshare>

Readme

Keywords

none

Package Sidebar

Install

npm i @zachleat/webcare-webshare

Weekly Downloads

128

Version

1.0.3

License

MIT

Unpacked Size

8.04 kB

Total Files

5

Last publish

Collaborators

  • zachleat