Social media share buttons for your next React apps.
No dependencies
Compatible with both JavaScript and TypeScript
Share buttons for your next React app
Facebook
Line
Pinterest
Reddit
Telegram
Tumblr
Twitter
Viber
Weibo
Whatsapp
Linkedin
VKShare
Livejournal
Workplace
Pocket
Instapaper
Hatena
FacebookMessenger
Email
import {
FacebookShareButton ,
FacebookIcon ,
} from 'next-share' ;
< FacebookShareButton
url = { 'https://github.com/next-share' }
quote = { 'next-share is a social share buttons for your next React apps.' }
hashtag = { '#nextshare' }
>
< FacebookIcon size = { 32 } round / >
< / FacebookShareButton >
๐ FacebookShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
quote
string
A quote to be shared.
โ
hashtag
string
Hashtag to be shared.
โ
windowWidth
number
550
Opened window width.
โ
windowHeight
number
400
Opened window height.
โ
import {
LineShareButton ,
LineIcon ,
} from 'next-share' ;
< LineShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< LineIcon / >
< / LineShareButton >
๐ LineShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
windowWidth
number
500
Opened window width.
โ
windowHeight
number
500
Opened window height.
โ
import {
PinterestShareButton ,
PinterestIcon ,
} from 'next-share'
< PinterestShareButton
url = { 'https://github.com/next-share' }
media = { 'next-share is a social share buttons for your next React apps.' }
>
< PinterestIcon size = { 32 } round / >
< / PinterestShareButton >
๐ PinterestShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
media
string
The image URL that will be pinned.
โ
description
string
The description of the shared media.
โ
windowWidth
number
1000
Opened window width.
โ
windowHeight
number
730
Opened window height.
โ
import {
RedditShareButton ,
RedditIcon ,
} from 'next-share'
< RedditShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< RedditIcon size = { 32 } round / >
< / RedditShareButton >
๐ RedditShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
TelegramShareButton ,
TelegramIcon ,
} from 'next-share'
< TelegramShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< TelegramIcon size = { 32 } round / >
< / TelegramShareButton >
๐ TelegramShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
windowWidth
number
550
Opened window width.
โ
windowHeight
number
400
Opened window height.
โ
import {
TumblrShareButton ,
TumblrIcon ,
} from 'next-share'
< TumblrShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< TumblrIcon size = { 32 } round / >
< / TumblrShareButton >
๐ TumblrShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
tags
Array<string>
โ
caption
string
The description of the shared page.
โ
posttype
string
link
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
๐ Twitter
import {
TwitterShareButton ,
TwitterIcon ,
} from 'next-share'
< TwitterShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< TwitterIcon size = { 32 } round / >
< / TwitterShareButton >
๐ TwitterShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
via
string
โ
hashtags
array
โ
related
array
โ
windowWidth
number
550
Opened window width.
โ
windowHeight
number
400
Opened window height.
โ
import {
ViberShareButton ,
ViberIcon ,
} from 'next-share'
< ViberShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
>
< ViberIcon size = { 32 } round / >
< / ViberShareButton >
๐ ViberShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
separator
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
WeiboShareButton ,
WeiboIcon ,
} from 'next-share'
< WeiboShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
image = { `${ String ( window . location ) } /${ example - image } ` }
>
< WeiboIcon size = { 32 } round / >
< / WeiboShareButton >
๐ WeiboShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
image
string
The image URL that will be shared.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
550
Opened window height.
โ
import {
WhatsappShareButton ,
WhatsappIcon ,
} from 'next-share'
< WhatsappShareButton
url = { 'https://github.com/next-share' }
title = { 'next-share is a social share buttons for your next React apps.' }
separator = ":: "
>
< WhatsappIcon size = { 32 } round / >
< / WhatsappShareButton >
๐ WhatsappShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
separator
string
โ
windowWidth
number
550
Opened window width.
โ
windowHeight
number
400
Opened window height.
โ
import {
LinkedinShareButton ,
LinkedinIcon ,
} from 'next-share'
< LinkedinShareButton url = { 'https://github.com/next-share' } >
< LinkedinIcon size = { 32 } round / >
< / LinkedinShareButton >
๐ LinkedinShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
summary
string
Description of the shared page.
โ
source
string
Source of the content (e.g. your website or application name).
โ
windowWidth
number
750
Opened window width.
โ
windowHeight
number
600
Opened window height.
โ
import {
VKShareButton ,
VKIcon ,
} from 'next-share'
< VKShareButton
url = { 'https://github.com/next-share' }
image = { './next-share.png' }
>
< VKIcon size = { 32 } round / >
< / VKShareButton >
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
image
string
An absolute link to the image that will be shared.
โ
noParse
boolean
If true is passed, VK will not retrieve URL information.
โ
noVkLinks
boolean
If true is passed, there will be no links to the user's profile in the open window. Only for mobile devices.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
MailruShareButton ,
MailruIcon ,
} from 'next-share'
< MailruShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< MailruIcon size = { 32 } round / >
< / MailruShareButton >
๐ MailruShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
description
string
Description of the shared page.
โ
imageUrl
string
Image url of the shared page.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
LivejournalShareButton ,
LivejournalIcon ,
} from 'next-share'
< LivejournalShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
description = { 'https://github.com/next-share' }
>
< LivejournalIcon size = { 32 } round / >
< / LivejournalShareButton >
๐ LivejournalShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
The title of the shared page.
โ
description
string
Description of the shared page.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
WorkplaceShareButton ,
WorkplaceIcon ,
} from 'next-share'
< WorkplaceShareButton
url = { 'https://github.com/next-share' }
quote = { 'Next Share' }
>
< WorkplaceIcon size = { 32 } round / >
< / WorkplaceShareButton >
๐ WorkplaceShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
quote
string
โ
hashtag
string
โ
windowWidth
number
550
Opened window width.
โ
windowHeight
number
400
Opened window height.
โ
import {
PocketShareButton ,
PocketIcon ,
} from 'next-share'
< PocketShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< PocketIcon size = { 32 } round / >
< / PocketShareButton >
๐ PocketShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
Title of the shared page. Note that if Pocket detects a title tag on the page being saved, this parameter will be ignored and the title tag of the saved page will be used instead.
โ
windowWidth
number
500
Opened window width.
โ
windowHeight
number
500
Opened window height.
โ
import {
InstapaperShareButton ,
InstapaperIcon ,
} from 'next-share'
< InstapaperShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< InstapaperIcon size = { 32 } round / >
< / InstapaperShareButton >
๐ InstapaperShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
Title of the shared page.
โ
description
string
Description of the shared page.
โ
windowWidth
number
500
Opened window width.
โ
windowHeight
number
500
Opened window height.
โ
import {
HatenaShareButton ,
HatenaIcon ,
} from 'next-share'
< HatenaShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< HatenaIcon size = { 32 } round / >
< / HatenaShareButton >
๐ HatenaShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
title
string
Title of the shared page.
โ
windowWidth
number
660
Opened window width.
โ
windowHeight
number
460
Opened window height.
โ
import {
FacebookMessengerShareButton ,
FacebookMessengerIcon ,
} from 'next-share'
< FacebookMessengerShareButton
url = { 'https://github.com/next-share' }
appId = { '' }
>
< FacebookMessengerIcon size = { 32 } round / >
< / FacebookMessengerShareButton >
๐ FacebookMessengerShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
appId
string
Facebook application id.
โ
redirectUri
string
The URL to redirect to after sharing (default: the shared url).
โ
to
string
A user ID of a recipient. Once the dialog comes up, the sender can specify additional people as recipients.
โ
windowWidth
number
1000
Opened window width.
โ
windowHeight
number
820
Opened window height.
โ
import {
EmailShareButton ,
EmailIcon ,
} from 'next-share'
< EmailShareButton
url = { 'https://github.com/next-share' }
subject = { 'Next Share' }
body = "body"
>
< EmailIcon size = { 32 } round / >
< / EmailShareButton >
๐ EmailShareButton props
Props
Type
Default
Description
Required
children
node
React component, HTML element or string.
โ
url
string
The URL of the shared page.
โ
subject
string
โ
body
string
โ
separator
string
โ
Props
Type
Default
Description
Required
size
number
Icon size in pixels.
โ
round
boolean
Show round or rectangle.
โ
borderRadius
number
Set rounded corners if using round icon.
โ
bgStyle
object
Customize background style.
โ
iconFillColor
string
white
Customize icon fill color.
โ
Changes in each release are documented in the CHANGELOG.md .
The MIT License