menu
Menu
Mobify DevCenter
search_icon_focus

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 & DescriptionTypeDefault
className
Adds values to the class attribute of the root element.
stringnone
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.
number200
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.
boolfalse
optionsPerCol
Defines the number of share options displayed per column on the Share sheet.
number2
optionsPerRow
Defines the number of share options displayed per row on the Share sheet.
number4
shareContent

Defines what is to be shared by the Share component. An object with the following structure: {title, text, url}

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 Share sheet through props.

func() => undefined
onFail

User-defined function that is called when the component fails to copy or share the URL. function(error) {...}

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 Share sheet through props.

func() => undefined
onSuccess

User-defined function that is called when the component successfully triggers the share option that a user selected. function(shareData) {...}

func() => undefined

Basic example

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark

With triggerElement

The triggerElement prop allows for an existing or custom component to trigger the Share sheet.

With a custom component

amex-hint[icon]/bag/dark[icon]/basket/dark[icon]/caret/bottom/dark[icon]/caret/left/dark[icon]/caret/right/dark[icon]/caret/top/dark[icon]/cart/dark[icon]/caution/darkAmericanExpressCredit CardUnionPaydankortdinersclubDiscoverinterpayjcbmaestroMasterCarduatpVisavisa-electron[icon]/check/dark[icon]/chevron/bottom/dark[icon]/chevron/left/dark[icon]/chevron/right/dark[icon]/chevron/top/dark[icon]/close/darkvisa-mc-hint@3x[icon]/edit/dark[icon]/help/dark[icon]/info/dark[icon]/like/dark[icon]/location/dark[icon]/lock/dark[icon]/menu/dark[icon]/minus/dark[icon]/more/dark[icon]/payment/dark[icon]/plus/dark[icon]/review/dark[icon]/search/dark[icon]/shipping/dark[icon]/social/facebook/dark[icon]/social/google-plus/dark[icon]/social/instagram/dark[icon]/social/pinterest/dark[icon]/social/twitter/dark[icon]/social/yelp/dark[icon]/social/youtube/dark[icon]/star/dark[icon]/trash/dark[icon]/user/dark[icon]/zoom/dark