https://github.com/levimcg/share-controls

A Web Component that adds native copy and paste and sharing controls to a web page
https://github.com/levimcg/share-controls

custom-elements progressive-enhancement webcomponent webcomponents

Last synced: 23 days ago
JSON representation

A Web Component that adds native copy and paste and sharing controls to a web page

• Host: GitHub
• URL: https://github.com/levimcg/share-controls
• Owner: levimcg
• Created: 2023-12-08T18:07:18.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2023-12-08T18:10:41.000Z (11 months ago)
• Last Synced: 2024-10-02T06:43:53.387Z (about 1 month ago)
• Topics: custom-elements, progressive-enhancement, webcomponent, webcomponents
• Language: JavaScript
• Homepage: https://levimcg.github.io/share-controls/
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `` element

A Custom Element that adds progressively enhanced share buttons to your web page. This custom element was inspired by this [excellent article](https://set.studio/simplify-sharing-with-built-in-apis-and-progressive-enhancement/) on the [Set Studio](https://set.studio/) blog.

## Usage

Add the `` element to your page and provide a simple fallback.

```html

  
Copy and paste to share this article: {{ Your URL here }}



```


By default the URL that gets copied to the clipboard and/or shared via the native web share API is the current page URL, but you can also use the provided `url` attribute to specify a different URL if you need to.

```html

  
Copy and paste to share this article: {{ Your URL here }}



```


## Attributes

| Attribute      | Description                                                                   |

| -------------- | ----------------------------------------------------------------------------- |

| `url`          | A string that is coppied to the clipboard and/or used by the native share API. Defaults to the current page's URL |

| `copy-button`  | A string that is used for the copy button text. Defaults to "Copy"                                |

| `share-text`   | A string that is use as the message by the native web share API. Defaults to the current page title               |

| `share-button` | A string that is used for the share button text. Defaults to "Share"                              |

## To-dos

- [ ] ...