Share
The Share
component provides a way for Progressive Web App (PWA) users to share the URL of their current page via email, text message, or social media. It uses the WebShare API if it’s supported on the user’s device and falls back to a limited web implementation.
JavaScript import
import Share from 'progressive-web-sdk/dist/components/share'
SCSS import
@import 'node_modules/progressive-web-sdk/dist/components/share/base';
Props table
Name & Description | Type | Default |
---|---|---|
className Adds values to the class attribute of the root element. | string | none |
coverage Coverage defines the amount of the current viewport taken up by the share sheet content. | string | '50%' |
didDismiss User-defined function that is called after the Share sheet is dismissed. | func | () => undefined |
didShow User-defined function that is called after the Share sheet is shown. | func | () => undefined |
duration Defines the time the show/dismiss animation takes to complete. | number | 200 |
headerContent User-defined header of the sheet | element | <h1 className="pw-share__sheet-header">Share via</h1> |
open Determines whether the Share Sheet is opened or closed. | bool | false |
optionsPerCol Defines the number of share options displayed per column on the Share sheet. | number | 2 |
optionsPerRow Defines the number of share options displayed per row on the Share sheet. | number | 4 |
shareContent Defines what is to be shared by the | object | { title: null, text: null, url: null } |
triggerElement User-defined element that is responsible for triggering the Share sheet. | element | <button> <span>Share…</span> </button> |
willDismiss User-defined function that is called before the Share sheet is dismissed. | func | () => undefined |
willShow User-defined function that is called before the Share sheet is shown. | func | () => undefined |
onDismiss User-defined function that is called when the user clicks to dismiss the sheet.
Use this to change state and re-render the | func | () => undefined |
onFail User-defined function that is called when the component fails to
copy or share the URL. | func | () => undefined |
onShow User-defined function that is used to trigger the rendering of the sheet.
Use this to change state and re-render the | func | () => undefined |
onSuccess User-defined function that is called when the component successfully
triggers the share option that a user selected. | func | () => undefined |
Basic example
With triggerElement
The triggerElement
prop allows for an existing or custom component to trigger the Share
sheet.
With a custom component