bunlong / next-share Goto Github PK

View Code? Open in Web Editor NEW

241.0 5.0 34.0 513 KB

Social media share buttons and share counts for your next React apps.

Home Page: https://next-share.js.org

License: MIT License

JavaScript 12.89% TypeScript 82.17% HTML 1.84% CSS 3.10%

react reactjs social-share-buttons social-share social-media typescript javascript sharing next-share nextjs

next-share's Introduction

next-share

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

next-share's People

Contributors

Stargazers

Watchers

next-share's Issues

Pop up not getting closed on twitter share

Hi there,
I tried the package and for the twitter and linkedin share the popup does not get closed after sharing...It works fine for facebook.Can anyone help me fix this issue?

Gab Share Button and Icon

WhatsApp Desktop does not work

Problem

Upon clicking the WhatsApp Share button on a web browser on a desktop, it opens web.whatsapp.com, which prompts to scan a QR code if not already signed in.

Many people use WhatsApp Desktop App (Windows, Mac, Linux).

Currently, there's no way to open WhatsApp Desktop in the current implementation.

Solution

I've made a PR here -> #56
Might need a review and merge, if fits the usecase.

v0.14.0

Features

FacebookShareCount
HatenaShareCount
OKShareCount
PinterestShareCount
PinterestShareCount
RedditShareCount
TumblrShareCount
VKShareCount

[Feature Request] -- Print Button support

Hello there!

It would be helpful to have a print option as well.
What do you think?

Add blankTarget props to open up a new tab instead of a new window

Email Share Button and Icon

Pocket Share Button and Icon

Add line break as separator in whatsapp share

Attempted import error: 'LinkedinIcon' is not exported from 'next-share'.

Linkedin Share Button and Icon

README

Instapaper Share Button and Icon

Request to Add Github Icon

As a developer, having a github icon on my personal projects is like a very crucial thing and finding out this library has an icon for a fricking tumblr but not of github is quite surprising.
Kindly add this

Tooltip Support

Hi team, thanks for the great work.

I think this tool can be enhanced by adding functionality of tooltip - to show a message when button is hovered on. Ex. Share to Facebook

Thanks!

FacebookShareButton not populating quote data

Hey Bunlong,

Thanks for this awesome package first and foremost!

I am running to the issue same as with 'react-share', it seems like the 'quote' prop is not populating the string on Facebook's side. Twitter works fine no issue, but for some reason, the 'quote' prop does not. Can you give me any hints as to why or what's a workaround?

[Feature Request] -- Copy link to clipboard support

Hello there!

Would be coherent to have an option for copy to clipboard.
It could have two forms, one just a button with a confirmation (may be a tooltip) to indicate "link copied". The other form could be an input text with the link inside and that copy when clicked.

What do you think ?

Fix InstagramIcon

Detail

Fix InstagramIcon size and color

"added 1060 packages" with 7 high vulnerabilities?

Great and useful library! But I have a problem.
When I install the latest version of this library, it adds 1060 packages with 7 high vulnerabilities. When I install v0.13.0, I only get 130 and no vulnerabilities. What's the cause of this?

Documents

Mastodon social share

is it possible to have a Mastodon social media share?

Get typescript warning when using Icon inside ShareButton.

Issue

Get typescript warning when using Icon inside ShareButton.

workaruond

<ShareButton
  children={<Icon />}
/>

Facebook share opening in browser

Hi there,
the Facebook share button is opening in a browser. Is it possible to prompt the user to open in the Facebook App on mobile?

Add mobile props to choose between web link or app link for messenger

Draft

<FacebookMessengerShareButton
  url={url}
  mobile={isMobile}
  appId='************'
  className='share_button'
>
  <FacebookMessengerIcon size={32} round />
</FacebookMessengerShareButton>

Warning: Support for defaultProps will be removed in a future major release

Hello,

Thanks for this useful package ;)

There is this big warning in the console:

Warning: n: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

 at n (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected][email protected]/node_modules/next-share/dist/next-share.es.js:70:2471)

sharing with instagram ?

is there any functionality like sharing on Instagram?

Is it possible to open the EmailShareButton in a new window or modal?

I'd love to be able to have this open in a modal ideally, like the others. Is that possible?

thx! :)

Upgrade dependencies

Detail

Upgrade both development dependencies and production dependencies.

Linkedin title and summary

Hi Team..

I can not get title and summary to work when sharing to linkedin. Using below and url is working fine, but i don't get the expected Title and Summary, or am i missing something / doing anything wrong ?

     <LinkedinShareButton
             title="Title test"
             summary="Summary test"
             url={`https://www.giveone.com/news/${actionfeed.fields.slug}`}
           >
             Share on Linkedin
      </LinkedinShareButton>

Rendered tag and styling

Feature Request

I believe that this library can be enhanced with a custom rendered tag and custom styles.

Currently the rendered tag is button tag with inline styles. It would be great if developers can choose the tag and add a classname.

For example the syntax to be rendered as links and adding styles:
<WhatsappShareButton as="a" className={styles.shareButton} styles={{ padding: 16 }}> <FontAwesomeIcon icon={{ prefix: "fab", iconName: "whatsapp }} /> </WhatsappShareButton>

Workplace Share Button and Icon

FacebookMessenger Share Button and Icon

Resize next-share to smaller size

Add ShareCount component

Feature

FacebookShareCount
HatenaShareCount
OKShareCount
PinterestShareCount
RedditShareCount
TumblrShareCount
VKShareCount

VK Share Button and Icon

Why is there no image prop for facebook share?

and other share buttons

Hatena Share Button and Icon

LiveJournal Share Button and Icon

Mail.ru Share Button and Icon

Add instagram icon

Restructure environment

Is it possible to bold text on EmailShareButton body component ?

I'm using the EmailShareButton component body but i can't seem to bold the text.. its outputting [object Object] instead..

const body =
<strong>Heading</strong> + '\n' +
job?.description.replace(/<[^>]*>?/gm, '').replace(' ', ' ').slice(0, 100) + '... \n\n';

EmailShareButton
url={${siteUrl}/${urlPrefix}/${post?.url_slug}}
subject={'Our website | ' + post?.title}
body={body} >

Can't install in react 18

Your library is awsome. I installed on my next project with react 18, show me this error.
Please, let me know how to solve

Multiple hashtags for facebook

How to use your library if I want to have multiple hashtags for facebook?
The document says about using a single "hashtag" of type string; but does not mention anything about multiple hashtags at all for facebook.

facebook, linkediin and twitter share buttons don't work on mobile devices

On desktop, all my share buttons work perfectly but after deployment and I decide to share on mobile device, it fails. I even tried the one on the docs on my mobile device and it failed.

Buttons format

There is a way to format the buttons as actual normal buttons?

?

Does FacebookMessengerShareButton work without an app ID?

I'm getting an error from Facebook when using the FacebookMessengerShareButton

Sorry, this content isn't available right now
The link you followed may have expired, or the page may only be visible to an audience you're not in.

Maybe something has changed with their API or perhaps there are settings I've missed?

Thx! :)

React warnings when using FacebookShareButton component

When using the FacebookShareButton component I'm getting the following React warnings:

React does not recognize the windowWidth prop on a DOM element.
React does not recognize the windowHeight prop on a DOM element.
React does not recognize the networkLink prop on a DOM element.
React does not recognize the disabledStyle prop on a DOM element.
React does not recognize the openShareDialogOnClick prop on a DOM element.
React does not recognize the resetButtonStyle prop on a DOM element.

I'm also using the TwitterShareButton and WhatsappShareButton components and not seeing these warnings when using those components.

Idea: Add support for the Facebook share dialog to next-share

If we could get access to the FB.ui options behind the next-share interface, something like this:
window.FB.ui({
method: 'share',
display: 'popup',
href: 'https://www.example.com/',
title: 'My Example Link',
description: 'This is a great example link for sharing!',
picture: 'https://www.example.com/image.jpg',
});

LinkedinShareButton not populating title nor summary data

Hi,

First of all thank you for this amazing package!

I am trying to share some url to LinkedIn with a title and a summary:

<LinkedinShareButton 
    url={'https://github.com/next-share'}
    title={'next-share is a social share buttons for your next React apps.'}
    summary={'This is a test for summary'}
>
  <LinkedinIcon size={32} round />
</LinkedinShareButton>

But it doesn't seem to work. Only the url props is working somehow. Is there any way to work around this? Thanks!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

bunlong / next-share Goto Github PK

next-share's Introduction

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