https://github.com/zachleat/webcare-webshare

https://github.com/zachleat/webcare-webshare

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/zachleat/webcare-webshare
• Owner: zachleat
• License: mit
• Created: 2024-02-15T23:19:53.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-20T21:56:42.000Z (9 months ago)
• Last Synced: 2024-04-26T10:22:54.007Z (7 months ago)
• Language: JavaScript
• Homepage: https://zachleat.github.io/webcare-webshare/demo.html
• Size: 13.7 KB
• Stars: 19
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `` Web Component

A web component that uses the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) to share a web site, falling back (on Desktop usually) to Copy to Clipboard.

* [Demo](https://zachleat.github.io/webcare-webshare/demo.html)

	* In use on the registration flow for [`conf.11ty.dev`](https://conf.11ty.dev/).

* [Blog post](https://www.zachleat.com/web/webcare-webshare/)

*  Inspired by [_How to let the user share the website they are on_—Thomas Steiner (web.dev)](https://web.dev/patterns/web-apps/share/)

## 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`](https://www.npmjs.com/package/@zachleat/webcare-webshare)) or download the `webcare-webshare.js` JavaScript file manually.

```shell

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](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API). The button is un-disabled when initialized.

```html

	Share your ticket!

```

### 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.

```html

	Share your ticket!

```

### 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.

```html

	Share your ticket!

```