share-button-component

v0.0.4-4

Published

4 years ago

Web component to share text content & links using system-provided capabilities

0High
0Medium
0Low

tonyspegel

typescript web-components

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

share-button-with-text

TL;DR

Demo Code

Installation

NPM:

npm i share-button-component

UNPKG:

<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 URLdocument.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 i

Build

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 build

To watch files and rebuild when the files are modified, run the following command in a separate shell:

npm run build:watch

The 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 lint

Formatting

Prettier is used for code formatting. Change its rules in .prettierrc.json.

npm run format

Demo

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>

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