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應用程序的輕量級小型組件。

⚖️許可證

麻省理工學院許可證