Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

next-share

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

next-share

Social media share buttons for your next React apps.

0.27.0
latest
Source
npm

Version published: last year

Maintainers: 1

Created: 4 years ago

Source

Social media share buttons for your next React apps.

🎁 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

🎀 Facebook

👨‍💻 Code

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

🎀 Line

👨‍💻 Code

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

🎀 Pinterest

👨‍💻 Code

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

🎀 Reddit

👨‍💻 Code

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

🎀 Telegram

👨‍💻 Code

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

🎀 Tumblr

👨‍💻 Code

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

🎀 Twitter

👨‍💻 Code

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

🎀 Viber

👨‍💻 Code

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

🎀 Weibo

👨‍💻 Code

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

🎀 Whatsapp

👨‍💻 Code

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

🎀 Linkedin

👨‍💻 Code

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.	✅
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 <head> block of the HTML.

<meta property='og:image' content='' />
<meta property='og:title' content='' />
<meta property='og:description' content='' />

🎀 VK

👨‍💻 Code

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

<VKShareButton
  url={'https://github.com/next-share'}
  image={'./next-share.png'}
>
  <VKIcon size={32} round />
</VKShareButton>

📖 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`.	❌

🎀 Mailru

👨‍💻 Code

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

🎀 Livejournal

👨‍💻 Code

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

🎀 Workplace

👨‍💻 Code

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

🎀 Pocket

👨‍💻 Code

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

🎀 Instapaper

👨‍💻 Code

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

🎀 Hatena

👨‍💻 Code

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

🎀 FacebookMessenger

👨‍💻 Code

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

🎀 Email

👨‍💻 Code

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

🎀 Gab

👨‍💻 Code

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

<GabShareButton
  url={'https://github.com/next-share'}
  title={'Next Share'}
>
  <GabIcon size={32} round />
</GabShareButton>

📖 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.	❌

📚 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

🎀 Facebook

👨‍💻 Code

import { FacebookShareCount } from 'next-share'

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

<FacebookShareCount
  url={'https://github.com/next-share'}
  appId={''}
  appSecret={''}
>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</FacebookShareCount>

📖 FacebookShareCount Props

Props	Type	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.	❌

🎀 Hatena

👨‍💻 Code

import { HatenaShareCount } from 'next-share'

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

<HatenaShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</HatenaShareCount>

📖 HatenaShareCount Props

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

🎀 OK

👨‍💻 Code

import { OKShareCount } from 'next-share'

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

<OKShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</OKShareCount>

📖 OKShareCount Props

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

🎀 Pinterest

👨‍💻 Code

import { PinterestShareCount } from 'next-share'

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

<PinterestShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</PinterestShareCount>

📖 PinterestShareCount Props

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

🎀 Tumblr

👨‍💻 Code

import { TumblrShareCount } from 'next-share'

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

<TumblrShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</TumblrShareCount>

📖 TumblrShareCount Props

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

🎀 VK

👨‍💻 Code

import { VKShareCount } from 'next-share'

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

<VKShareCount url={'https://github.com/next-share'}>
  {shareCount => <span className="wrapper">{shareCount}</span>}
</VKShareCount>

📖 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

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

Keywords

FAQs

What is next-share?

Is next-share well maintained?

Package last updated on 28 Sep 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

next-share

next-share

🎁 Features

🔧 Install

💡 Usage of ShareButton

🎀 Facebook

👨‍💻 Code

📖 FacebookShareButton Props

📖 FacebookIcon Props

🎀 Line

👨‍💻 Code

📖 LineShareButton Props

📖 LineIcon props

🎀 Pinterest

👨‍💻 Code

📖 PinterestShareButton Props

📖 PinterestIcon Props

🎀 Reddit

👨‍💻 Code

📖 RedditShareButton Props

📖 RedditIcon Props

🎀 Telegram

👨‍💻 Code

📖 TelegramShareButton Props

📖 TelegramIcon Props

🎀 Tumblr

👨‍💻 Code

📖 TumblrShareButton Props

📖 TumblrIcon Props

🎀 Twitter

👨‍💻 Code

📖 TwitterShareButton Props

📖 TwitterIcon Props

🎀 Viber

👨‍💻 Code

📖 ViberShareButton Props

📖 ViberIcon Props

🎀 Weibo

👨‍💻 Code

📖 WeiboShareButton Props

📖 WeiboIcon Props

🎀 Whatsapp

👨‍💻 Code

📖 WhatsappShareButton Props

📖 WhatsappIcon Props

🎀 Linkedin

👨‍💻 Code

📖 LinkedinShareButton Props

📖 LinkedinIcon Props

🎀 VK

👨‍💻 Code

📖 VKShareButton Props

📖 VKIcon Props

🎀 Mailru

👨‍💻 Code

📖 MailruShareButton Props

📖 MailruIcon Props

🎀 Livejournal

👨‍💻 Code

📖 LivejournalShareButton Props

📖 LivejournalIcon Props

🎀 Workplace

👨‍💻 Code

📖 WorkplaceShareButton Props

📖 WorkplaceIcon Props

🎀 Pocket

👨‍💻 Code

📖 PocketShareButton Props

📖 PocketIcon Props

🎀 Instapaper

👨‍💻 Code

📖 InstapaperShareButton Props

📖 InstapaperIcon Props

🎀 Hatena

👨‍💻 Code

📖 HatenaShareButton Props

📖 HatenaIcon Props

🎀 FacebookMessenger

👨‍💻 Code

📖 FacebookMessengerShareButton Props