npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@georapbox/web-share-element

v3.1.1

Published

A custom element that implements the Web Share API to share user-defined data.

Downloads

173

Readme

npm version npm license

<web-share>

A custom element that implements the Web Share API to share user-defined data.

API documentationDemo

Install

$ npm install --save @georapbox/web-share-element

Usage

Script

import { WebShare } from './node_modules/@georapbox/web-share-element/dist/web-share.js';

// Manually define the element.
WebShare.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/web-share-element/dist/web-share-defined.js';

Markup

<web-share 
  share-url="https://developer.mozilla.org" 
  share-title="MDN" 
  share-text="Learn web development on MDN!"
></web-share>

Style

By default, the component is style-free to remain as less opinionated as possible. However, you can style the various elements of the component using CSS Parts provided for this purpose.

API

Properties

| Name | Reflects | Type | Default | Description | | ---- | -------- | ---- | ------- | ----------- | | shareUrlshare-url | ✓ | String | '' | A string representing a URL to be shared. | | shareTitleshare-title | ✓ | String | '' | A string representing a title to be shared. | | shareTextshare-text | ✓ | String | '' | A string representing text to be shared. | | shareFiles | - | Array | [] | An array of File objects representing files to be shared. this property will be omitted if the device does not support sharing files or a file type is not shareable and it will try to share the rest of the properties. Check here for shareable file types. | | disabled | ✓ | Boolean | false | Determines if the share button is disabled. |

Slots

| Name | Description | | ---- | ----------- | | button | Override the share button with another element of your preference. Example: <a href="#" slot="button" role="button">Share this page</a> | | button-content | Override the share button's content with content of your preference. Useful if all you need is to change the button's label. Example: <span slot="button-content">Share this page</span> |

CSS Parts

| Name | Description | | ---- | ----------- | | button | The share button. | | button--disabled | The share button when is disabled. |

Methods

| Name | Type | Description | Arguments | | ---- | ---- | ----------- | --------- | | defineCustomElement | Static | Defines/registers the custom element with the name provided. If no name is provided, the default name is used. The method checks if the element is already defined, hence will skip trying to redefine it. | elementName='web-share' | | share1 | Instance | Shares the shareable data taken from the element's properties. | - |

1 Instance methods are only available after the component has been defined. To ensure that the component has been defined, you can use the whenDefined method of the CustomElementRegistry interface. For example:

customElements.whenDefined('web-share').then(() => {
  /* call methods here */
});

Events

| Name | Description | Event Detail | | ---- | ----------- | ------------ | | web-share:success | Emitted when share is successful. | { shareData: { url?: String, title?: String, text?: String, files?: File[] } } | | web-share:abort | Emitted when share is aborted. | { error: AbortError } | | web-share:error | Emitted when share fails for any reason. Here is a full list of possible exceptions. | { error: TypeError } |

Utilities

isWebShareSupported()

Returns true if Web Share API is supported by the platform, otherwise returns false. By default, it checks if navigator.share is supported. If you want to check for support of a specific shareable data type, you can pass an object as argument with the shareable data you want to check for support. For example, if you want to check if sharing files is supported, you can pass {files: [File, ...]} as argument. Available shareable data types are url, text, title and files.

isWebShareSupported({ 
  files: [new File(['foo'], 'foo.txt', { type: 'text/plain', })]
});

NOTE: You don't necessarily need to check for Web Share API support. The component handles errors regarding support internally; you can catch them by registering the web-share:error event. The utility might come handy for a scenario that you want to dynamically import the custom element only if the API is supported (check example below). In cases that the Web Share API is partially supported, (eg Firefox in Android supports sharing url and title but not text or files), the component will try to share the other shareable data if provided and will omit any unsupported shareable data.

import { isWebShareSupported } from './node_modules/@georapbox/web-share-element/dist/is-web-share-supported.js';

// Check if Web Share API is supported
if (isWebShareSupported()) {
  // Import component dynamically...
  const { WebShare } = await import('./node_modules/@georapbox/web-share-element/dist/web-share.js');

  WebShare.defineCustomElement();
}

Changelog

For API updates and breaking changes, check the CHANGELOG.

Development setup

Prerequisites

The project requires Node.js and npm to be installed on your environment. Preferrably, use nvm Node Version Manager and use the version of Node.js specified in the .nvmrc file by running nvm use.

Install dependencies

Install the project dependencies by running the following command.

npm install

Build for development

Watch for changes and start a development server by running the following command.

npm start

Linting

Lint the code by running the following command.

npm run lint

Testing

Run the tests by running any of the following commands.

npm test
npm run test:watch # watch mode

Build for production

Create a production build by running the following command.

npm run build

License

The MIT License (MIT)