next share

下一个共享

社交媒体为您的下一个React应用程序共享按钮。

？特征

• 没有依赖性
• 与JavaScript和打字稿兼容
• 为您的下一个React应用共享按钮
  • Facebook
  • 线
  • Pinterest
  • reddit
  • 电报
  • tumblr
  • 叽叽喳喳
  • Viber
  • 微博
  • WhatsApp
  • LinkedIn
  • vkshare
  • Mailru
  • LiveJournal
  • 工作场所
  • 口袋
  • Instapaper
  • 哈特纳
  • Facebookmessenger
  • 电子邮件
  • 瞎扯
• 股票计数
  • Facebook Sharecount
  • Hatenasharecount
  • OKSHARECOUNT
  • Pinterestsharecount
  • Tumblrsharecount
  • vksharecount
• 图标

？安装

NPM上可以使用下一个共享。可以使用以下命令安装：

 npm install next-share --save

下一个共享也可以在纱线上使用。可以使用以下命令安装：

 yarn add next-share --save

使用ShareButton

？ Facebook

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
引用	细绳		一个要共享的报价。
井号	细绳		标签要共享。
窗宽	数字	550	打开窗口宽度。
窗户	数字	400	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Facebookicon道具

？线

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
窗宽	数字	500	打开窗口宽度。
窗户	数字	500	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

lineicon道具

？ Pinterest

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
媒体	细绳		将固定的图像URL。	✅
描述	细绳		共享媒体的描述。
窗宽	数字	1000	打开窗口宽度。
窗户	数字	730	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Pinteresticon道具

？ reddit

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Redditicon道具

？电报

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
窗宽	数字	550	打开窗口宽度。
窗户	数字	400	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Telegramicon道具

？ tumblr

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
标签	Array<string>
标题	细绳		共享页面的描述。
后类型	细绳	link
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Tumblricon道具

？叽叽喳喳

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
通过	细绳
主题标签	大批
有关的	大批
窗宽	数字	550	打开窗口宽度。
窗户	数字	400	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Twittericon道具

？ Viber

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
分离器
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Vibericon道具

？微博

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
图像	细绳		将共享的图像URL。
窗宽	数字	660	打开窗口宽度。
窗户	数字	550	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

微博道具

？ WhatsApp

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
分离器	细绳
窗宽	数字	550	打开窗口宽度。
窗户	数字	400	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Whatsappicon道具

？ LinkedIn

？代码

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

< LinkedinShareButton url = { 'https://github.com/next-share' } >
  < LinkedinIcon size = { 32 } round />
</ LinkedinShareButton > 

Linkedinsharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
窗宽	数字	750	打开窗口宽度。
窗户	数字	600	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

您如何使用title ， summary等诸如？

在HTML的<head>块中使用og标签。

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

Linkedinicon道具

？ VK

？代码

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

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

VKSharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
图像	细绳		将共享图像的绝对链接。
noparse	布尔		如果通过了True，VK将不会检索URL信息。
Novklinks	布尔		如果传递true，则将在打开窗口中没有指向用户配置文件的链接。仅适用于移动设备。
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Vkicon道具

？ Mailru

？代码

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

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

MailRusharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
描述	细绳		共享页面的描述。
ImageUrl	细绳		共享页面的图像URL。
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

MailRuicon道具

？ LiveJournal

？代码

 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道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
描述	细绳		共享页面的描述。
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

LiveJournalicon道具

？工作场所

？代码

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

< WorkplaceShareButton
  url = { 'https://github.com/next-share' }
  quote = { 'Next Share' }
>
  < WorkplaceIcon size = { 32 } round />
</ WorkplaceShareButton > 

Workplacesharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
引用	细绳
井号	细绳
窗宽	数字	550	打开窗口宽度。
窗户	数字	400	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

工作场所道具

？口袋

？代码

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

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

Pocketsharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。请注意，如果Pocket检测到保存页面上的标题标签，则将忽略此参数，并且将使用保存页面的标题标签。
窗宽	数字	500	打开窗口宽度。
窗户	数字	500	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

奇特子道具

？ Instapaper

？代码

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

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

Instapapersharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
描述	细绳		共享页面的描述。
窗宽	数字	500	打开窗口宽度。
窗户	数字	500	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Instapapericon道具

？哈特纳

？代码

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

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

Hatenasharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
窗宽	数字	660	打开窗口宽度。
窗户	数字	460	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Hatenaicon道具

？ Facebookmessenger

？代码

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

< FacebookMessengerShareButton
  url = { 'https://github.com/next-share' }
  appId = { '' }
>
  < FacebookMessengerIcon size = { 32 } round />
</ FacebookMessengerShareButton > 

Facebookmessengersharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
苹果	细绳		Facebook应用程序ID。	✅
Redirecturi	细绳		分享后重定向的URL（默认：共享URL）。
到	细绳		收件人的用户ID。对话框出现后，发件人可以将其他人指定为收件人。
窗宽	数字	1000	打开窗口宽度。
窗户	数字	820	打开窗户高度。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Facebookmessengericon道具

？电子邮件

？代码

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

< EmailShareButton
  url = { 'https://github.com/next-share' }
  subject = { 'Next Share' }
  body = "body"
>
  < EmailIcon size = { 32 } round />
</ EmailShareButton > 

EmailSharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
主题	细绳
身体	细绳
分离器	细绳
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

Emailicon道具

？瞎扯

？代码

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

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

Gabsharebutton道具

道具	类型	默认	描述	必需的
孩子们	节点		React组件，HTML元素或字符串。	✅
URL	细绳		共享页面的URL。	✅
标题	细绳		共享页面的标题。
窗宽	数字	660	打开窗口宽度。
窗户	数字	640	打开窗户高度。

加比孔道具

图标道具

道具	类型	默认	描述	必需的
尺寸	数字		图标大小以像素为单位。
圆形的	布尔		显示圆形或矩形。
Borderradius	数字		设置圆角，如果使用圆形图标。
BGSTYLE	目的		自定义背景样式。
IconFillColor	细绳	white	自定义图标填充颜色。
空白	布尔	错误的	如果设置为true ，则在新选项卡中打开共享窗口。

使用ShareCount

？ Facebook

？代码

 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 > 

Facebook Sharecount道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
苹果	细绳		Facebook应用程序ID。	✅
AppSecret	细绳		Facebook应用程序秘密。	✅
孩子们	节点		React组件，HTML元素或字符串。

？哈特纳

？代码

 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道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
孩子们	节点		React组件，HTML元素或字符串。

？好的

？代码

 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道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
孩子们	节点		React组件，HTML元素或字符串。

？ Pinterest

？代码

 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道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
孩子们	节点		React组件，HTML元素或字符串。

？ tumblr

？代码

 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道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
孩子们	节点		React组件，HTML元素或字符串。

？ VK

？代码

 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道具

道具	类型	默认	描述	必需的
URL	细绳		共享页面的URL。	✅
孩子们	节点		React组件，HTML元素或字符串。

使用图标

？代码

 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' 

道具

道具	类型	默认	描述	必需的
尺寸	数字		图标大小以像素为单位。
圆形的	布尔		是显示圆形图标还是截然图标。
Borderradius	数字		如果使用矩形图标，则允许圆角。
BGSTYLE	目的		自定义背景。
IconFillColor	细绳	white	自定义图标填充颜色。

ChangElog

最新版本0.27.0（2023-09-28）：

• 升级Twittericon

每个版本的详细信息都在changelog.md中记录。

？包起来

如果您认为可以改善任何next-share ，请在任何更新中打开PR并提交任何问题。另外，我将继续改进这一点，因此您可能需要观看/星级库进行重新访问。

？贡献

我们很想通过分叉和发送拉动请求来帮助您为next-share贡献提供帮助！

您的贡献是衷心的♡欢迎，认可和赞赏。 （✿◠‿◠）

如何贡献：

• 打开拉动请求，并改进
• 讨论问题的想法
• 传播这个词
• 取得任何反馈

贡献者

本隆	Arturs Kirtovskis	肖恩	史蒂夫·斯卡沃（Steve Scavo）	玛迪·米勒（Maddy Miller）	Joe McBroom
莉娜·科特里尔（Lena Kotlyar）

？‍？广告

你也许有兴趣。

• 反应模式 - 在开发中用于React开发人员的反应模式和技术。
• React Papaparse - 最快的浏览器CSV（或划界文本）解析器。
• 下一个QRCode - 用于为您的下一个React应用程序生成QR码的React Hooks。
• 下一次 - 您的下一个React应用程序的轻量级小型组件。

⚖️许可证

麻省理工学院许可证