next-share

Social media share buttons for your next React apps.

 

 !npm bundle size  

🎁 Features

* 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
* Mailru
* Livejournal
* Workplace
* Pocket
* Instapaper
* Hatena
* FacebookMessenger
* Email
* Gab
* Share counts
* FacebookShareCount
* HatenaShareCount
* OKShareCount
* PinterestShareCount
* TumblrShareCount
* VKShareCount
* Icons

🔧 Install

next-share is available on npm. It can be installed with the following command:

``
npm install next-share --save
`

next-share is available on yarn as well. It can be installed with the following command:

`
yarn add next-share --save
`

💡 Usage of ShareButton

$3

#### 👨‍💻 Code

`js
import {
FacebookShareButton,
FacebookIcon,
} from 'next-share'

url={'https://github.com/next-share'}
quote={'next-share is a social share buttons for your next React apps.'}
hashtag={'#nextshare'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 FacebookIcon Props

$3

#### 👨‍💻 Code

`js
import {
LineShareButton,
LineIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 LineIcon props

$3

#### 👨‍💻 Code

`js
import {
PinterestShareButton,
PinterestIcon,
} from 'next-share'

url={'https://github.com/next-share'}
media={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 PinterestIcon Props

$3

#### 👨‍💻 Code

`js
import {
RedditShareButton,
RedditIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 RedditIcon Props

$3

#### 👨‍💻 Code

`js
import {
TelegramShareButton,
TelegramIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 TelegramIcon Props

$3

#### 👨‍💻 Code

`js
import {
TumblrShareButton,
TumblrIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 TumblrIcon Props

$3

#### 👨‍💻 Code

`js
import {
TwitterShareButton,
TwitterIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 TwitterIcon Props

$3

#### 👨‍💻 Code

`js
import {
ViberShareButton,
ViberIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 ViberIcon Props

$3

#### 👨‍💻 Code

`js
import {
WeiboShareButton,
WeiboIcon,
} from 'next-share'

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}}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 WeiboIcon Props

$3

#### 👨‍💻 Code

`js
import {
WhatsappShareButton,
WhatsappIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'next-share is a social share buttons for your next React apps.'}
separator=":: "
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 WhatsappIcon Props

$3

#### 👨‍💻 Code

`js
import {
LinkedinShareButton,
LinkedinIcon,
} from 'next-share'




`

#### 📖 LinkedinShareButton Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| children | node | | React component, HTML element or string. | ✅ |
| url | string | | The URL of the shared page. | ✅ |
| windowWidth | number | 750 | Opened window width. | ❌ |
| windowHeight | number | 600 | Opened window height. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |


How do you use things like title, summary, etc.?

Use og tags in the block of the HTML.

`html



`

#### 📖 LinkedinIcon Props

$3

#### 👨‍💻 Code

`js
import {
VKShareButton,
VKIcon,
} from 'next-share'

url={'https://github.com/next-share'}
image={'./next-share.png'}
>


`

#### 📖 VKShareButton 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 | | 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 VKIcon Props

$3

#### 👨‍💻 Code

`js
import {
MailruShareButton,
MailruIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 MailruIcon Props

$3

#### 👨‍💻 Code

`js
import {
LivejournalShareButton,
LivejournalIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
description={'https://github.com/next-share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 LivejournalIcon Props

$3

#### 👨‍💻 Code

`js
import {
WorkplaceShareButton,
WorkplaceIcon,
} from 'next-share'

url={'https://github.com/next-share'}
quote={'Next Share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 WorkplaceIcon Props

$3

#### 👨‍💻 Code

`js
import {
PocketShareButton,
PocketIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 PocketIcon Props

$3

#### 👨‍💻 Code

`js
import {
InstapaperShareButton,
InstapaperIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 InstapaperIcon Props

$3

#### 👨‍💻 Code

`js
import {
HatenaShareButton,
HatenaIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 HatenaIcon Props

$3

#### 👨‍💻 Code

`js
import {
FacebookMessengerShareButton,
FacebookMessengerIcon,
} from 'next-share'

url={'https://github.com/next-share'}
appId={''}
>


`

#### 📖 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 FacebookMessengerIcon Props

$3

#### 👨‍💻 Code

`js
import {
EmailShareButton,
EmailIcon,
} from 'next-share'

url={'https://github.com/next-share'}
subject={'Next Share'}
body="body"
>


`

#### 📖 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 | | | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

#### 📖 EmailIcon Props

$3

#### 👨‍💻 Code

`js
import {
GabShareButton,
GabIcon,
} from 'next-share'

url={'https://github.com/next-share'}
title={'Next Share'}
>


`

#### 📖 GabShareButton 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 | 640 | Opened window height. | ❌ |

#### 📖 GabIcon Props

📚 Icons Props

| 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. | ❌ |
| blankTarget | boolean | false | Open share window in a new tab if set to true. | ❌ |

💡 Usage of ShareCount

$3

#### 👨‍💻 Code

`js
import { FacebookShareCount } from 'next-share'

url={'https://github.com/next-share'}
appId={''}
appSecret={''}
/>

url={'https://github.com/next-share'}
appId={''}
appSecret={''}
>
{shareCount => {shareCount}}

`

#### 📖 FacebookShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| appId | string | | Facebook application id. | ✅ |
| appSecret | string | | Facebook application secret. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

$3

#### 👨‍💻 Code

`js
import { HatenaShareCount } from 'next-share'


{shareCount => {shareCount}}

`

#### 📖 HatenaShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

$3

#### 👨‍💻 Code

`js
import { OKShareCount } from 'next-share'


{shareCount => {shareCount}}

`

#### 📖 OKShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

$3

#### 👨‍💻 Code

`js
import { PinterestShareCount } from 'next-share'


{shareCount => {shareCount}}

`

#### 📖 PinterestShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

$3

#### 👨‍💻 Code

`js
import { TumblrShareCount } from 'next-share'


{shareCount => {shareCount}}

`

#### 📖 TumblrShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

$3

#### 👨‍💻 Code

`js
import { VKShareCount } from 'next-share'


{shareCount => {shareCount}}

`

#### 📖 VKShareCount Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| url | string | | The URL of the shared page. | ✅ |
| children | node | | React component, HTML element or string. | ❌ |

💡 Usage of Icon

#### 👨‍💻 Code

`js
import {
EmailIcon,
FacebookIcon,
FacebookMessengerIcon,
GithubIcon,
HatenaIcon,
InstagramIcon,
InstapaperIcon,
LineIcon,
LinkedinIcon,
LivejournalIcon,
MailruIcon,
OKIcon,
PinterestIcon,
PocketIcon,
RedditIcon,
SpotifyIcon,
TelegramIcon,
TumblrIcon,
TwitterIcon,
ViberIcon,
VKIcon,
WeiboIcon,
WhatsappIcon,
WorkplaceIcon,
} from 'next-share'
`

#### 📖 Props

| Props | Type | Default | Description | Required |
| :--- | :--- | :--- | :--- | :--- |
| size | number | | Icon size in pixels. | ❌ |
| round | boolean | | Whether to show round or rect icons. | ❌ |
| borderRadius | number | | Allow rounded corners if using rect icons. | ❌ |
| bgStyle | object | | Customize background. | ❌ |
| iconFillColor | string | white | Customize icon fill color. | ❌ |

📜 Changelog

Latest version 0.27.0 (2023-09-28):

* Upgrade TwitterIcon

Details changes for each release are documented in the CHANGELOG.md.

💖 Wrap Up

If you think any of the next-share can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

🌟 Contribution

We'd love to have your helping hand on contributions to next-share` by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback

✨ Contributors

Bunlong	Arturs Kirtovskis	Sean	Steve Scavo	Maddy Miller	Joe McBroom
Lena Kotlyar

👨‍👩‍👦 Advertisement

You maybe interested.

* React Patterns – React patterns & techniques to use in development for React Developer.
* React Papaparse – The fastest in-browser CSV (or delimited text) parser for React.
* Next QRCode – React hooks for generating QR code for your next React apps.
* Next Time Ago – A lightweight tiny time-ago component for your next React apps.

⚖️ License

The MIT License