<share-button> a web component to share links & text content
About
This web component is a simple wrapper which enables your website or web app to use the system-provided share capabilities to share links and text content.
Some platforms do not provide the ability to use the Web Share API. The button won't be displayed at all on these platforms.
TL;DR
Installation
NPM:
npm i share-button-componentUNPKG:
<script type="module" src="https://unpkg.com/share-button-component"></script>^see usage
Configuration
You can configure <share-button> by using
attributes, a slot for content and some CSS variables.
Attributes
| Name | Required | Values | Default |
|---|---|---|---|
share-link |
No | Strings | 1. Canoncial link element<link rel="canonical" href="(...)" />2. current URL document.location.href or something you have set. |
share-title |
No | Strings | Empty string |
share-text |
No | Strings | Empty string |
Slots
Slots allow you to define placeholders in your template that can be filled with any markup fragment you want when the element is used in the markup. They are identified by their name attribute. The slot as shown below is used to display a <span> element
| Name | Example value |
|---|---|
share-button-content |
<span slot="share-button-content">Share</span> |
CSS variables
| Variable | Purpose | Default value |
|---|---|---|
--base-gap |
Spacing for paddings, margins & gaps | 8px |
--base-radius |
Border radius for different elements | 8px |
--bg-color |
Button background color |
--purple-300: #d8b4fe
|
--bg-interaction-color |
When using :hover or :focus
|
--purple-400: #c084fc
|
--border-color |
Button border color |
--purple-500: #a855f7
|
--bg-disabled-color |
Background color when a button is disabled | #d4d4d4 |
--border-disabled-color |
Border color when a button is disabled | #a4a4a4 |
--text-color-1 |
Text color for this button |
--purple-950: #2f0050
|
Usage
Plain HTML, no bundler
<html lang="en">
<head>
<script type="module" src="https://unpkg.com/share-button-component"></script>
</head>
<body>
<share-button
title="Share this article"
shareTitle="How to share things 🐸"
shareText="Share button as a web component"
>
<span slot="share-button-content">Share</span>
</share-button>
</body>
</html>Angular
It doesn't take much to use a web component in Angular.
See for yourself below or check out this StackBlitz project.
Define the schemas property inside one your modules like this:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
// ^import CUSTOM_ELEMENTS_SCHEMA
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
// ^define the scheme
bootstrap: [AppComponent]
})
export class AppModule { }Import it whereever you like to like this
import 'share-button-component';That's pretty much it. Everything else behaves like a normal component in Angular.
Using the component with ReactiveFormsModule (don't forget to include it in your module):
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import 'share-button-component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
public shareButtonForm: FormGroup;
public canShare = 'canShare' in navigator;
constructor(private formBuilder: FormBuilder) {
this.shareButtonForm = this.formBuilder.group({
shareTitle: ['Cool opossum fact'],
shareText: ['Opossums are incredibly agile'],
shareUrl: ['https://www.farmersalmanac.com/opossum-facts-27732'],
});
}
}Inside your template:
<form [formGroup]="shareButtonForm">
<mat-form-field appearance="fill">
<mat-label>Title</mat-label>
<input matInput formControlName="shareTitle" />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Text</mat-label>
<input matInput formControlName="shareText" />
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Link</mat-label>
<input matInput formControlName="shareUrl" />
</mat-form-field>
</form>
<share-button
[shareTitle]="shareButtonForm.controls['shareTitle'].value"
[shareText]="shareButtonForm.controls['shareText'].value"
[shareUrl]="shareButtonForm.controls['shareUrl'].value"
title="Share a fact about opossums"
>
<span slot="share-button-content">Possum fact</span>
</share-button>Setup
Install dependencies:
npm iBuild
This project uses the TypeScript compiler to produce JavaScript that runs in modern browsers.
To build the JavaScript version of this component you would need to run:
npm run buildTo watch files and rebuild when the files are modified, run the following command in a separate shell:
npm run build:watchThe TypeScript compiler is configured to be very strict. You may want to change tsconfig.json to make it less strict.
Linting
Linting of TypeScript files is provided by ESLint and TypeScript ESLint. The rules are mostly the recommended rules from each project.
The recommended rules are pretty strict, so you may want to relax them by editing .eslintrc.json and tsconfig.json.
To lint the project run:
npm run lintFormatting
Prettier is used for code formatting. Change its rules in .prettierrc.json.
npm run formatDemo
Checkout the small demo I've put together https://tonyspegel.github.io/share-button/
You can also run it by yourself by changing the index.html
from
<script type="module" src="https://unpkg.com/share-button-component"></script> to
<script type="module" src="./dist/index.js"></script>and running npm run build or nmp run build:watch and also npm run wds (when your system supports navigator.canShare()). For local development on a mobile device I've created a SSL cert with mkcert and use it together with npm run wds:secure.