useShare

The useShare hook provides native sharing functionality through the Shop app's share sheet. Supports sharing text messages, titles, URLs (single or multiple), and custom content types. You can use this for user generated content sharing, product sharing, referral links, wishlists, or any social sharing features.

Anchor to useShare
useShare()

Anchor to useShare-returnsReturns

UseShareReturns

Generic Social Share

(params: ShareParams) => Promise<ShareResponse>

shareSingle

Social Share for a single social medium

(params: ShareSingleParams) => Promise<ShareSingleResponse>

ShareParams

failOnCancel
```
boolean
```
message
```
string
```
title
```
string
```
type
```
string
```
url
```
string
```
urls
```
string[]
```

ShareResponse

dismissedAction
```
boolean
```
message
```
string
```
success
```
boolean
```

ShareSingleParams

BaseShareSingleOptions | InstagramShareSingleOptions | FacebookShareSingleOptions

BaseShareSingleOptions

appId
```
string
```
email
```
string
```
filename
```
string
```
forceDialog
```
boolean
```
message
```
string
```
recipient
```
string
```

social

Social.Facebook | Social.Pagesmanager | Social.Twitter | Social.Whatsapp | Social.Whatsappbusiness | Social.Instagram | Social.Googleplus | Social.Email | Social.Pinterest | Social.Linkedin | Social.Sms | Social.Telegram | Social.Snapchat | Social.Messenger | Social.Viber | Social.Discord

subject
```
string
```
title
```
string
```
type
```
string
```
url
```
string
```
urls
```
string[]
```

Social

Facebook
```
facebook
```
FacebookStories
```
facebookstories
```
Pagesmanager
```
pagesmanager
```
Twitter
```
twitter
```
Whatsapp
```
whatsapp
```
Whatsappbusiness
```
whatsappbusiness
```
Instagram
```
instagram
```
InstagramStories
```
instagramstories
```
Googleplus
```
googleplus
```
Email
```
email
```
Pinterest
```
pinterest
```
Linkedin
```
linkedin
```
Sms
```
sms
```
Telegram
```
telegram
```
Snapchat
```
snapchat
```
Messenger
```
messenger
```
Viber
```
viber
```
Discord
```
discord
```

InstagramShareSingleOptions

appId
```
string
```
attributionURL
```
string
```
backgroundBottomColor
```
string
```
backgroundImage
```
string
```
backgroundTopColor
```
string
```
backgroundVideo
```
string
```
email
```
string
```
filename
```
string
```
forceDialog
```
boolean
```
linkText
```
string
```
linkUrl
```
string
```
message
```
string
```
recipient
```
string
```
social
```
Social.InstagramStories
```
stickerImage
```
string
```
subject
```
string
```
title
```
string
```
type
```
string
```
url
```
string
```
urls
```
string[]
```

FacebookShareSingleOptions

appId
```
string
```
attributionURL
```
string
```
backgroundBottomColor
```
string
```
backgroundImage
```
string
```
backgroundTopColor
```
string
```
backgroundVideo
```
string
```
email
```
string
```
filename
```
string
```
forceDialog
```
boolean
```
linkText
```
string
```
linkUrl
```
string
```
message
```
string
```
recipient
```
string
```
social
```
Social.FacebookStories
```
stickerImage
```
string
```
subject
```
string
```
title
```
string
```
type
```
string
```
url
```
string
```
urls
```
string[]
```

ShareSingleResponse

message
```
string
```
success
```
boolean
```

Examples

tsx

import {useShare, Button} from '@shopify/shop-minis-react'

export default function MyComponent() {

const {share} = useShare()

const handleShare = async () => {

const result = await share({

title: 'Check out this product!',

text: 'I found this amazing product on Shop',

url: 'https://shop.app/products/123',

})

console.log({shareResult: result})

}

return <Button onClick={handleShare}>Share</Button>

}