次の株
ソーシャルメディアは、次のReactアプリのボタンを共有します。
?特徴
- 依存関係はありません
- JavaScriptとTypeScriptの両方と互換性があります
- 次のReactアプリのボタンを共有します
- Facebook
- ライン
- Pinterest
- reddit
- 電報
- tumblr
- ツイッター
- Viber
- ワイボ
- whatsapp
- LinkedIn
- vkshare
- Mailru
- LiveJournal
- 職場
- ポケット
- Instapaper
- 憎しみ
- FacebookMessenger
- メール
- ギャブ
- 共有カウント
- FacebookShareCount
- hatenasharecount
- Oksharecount
- pinterestsharecount
- tumblrsharecount
- vksharecount
- アイコン
?インストール
次の株はNPMで利用できます。次のコマンドでインストールできます。
npm install next-share --save
Yarnでは次の株も利用できます。次のコマンドでインストールできます。
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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| 引用 | 弦 | | 共有される引用。 | |
| ハッシュタグ | 弦 | | 共有するハッシュタグ。 | |
| 窓幅 | 番号 | 550 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 400 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 窓幅 | 番号 | 500 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 500 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
ラインコンの小道具
? 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| メディア | 弦 | | ピン留めされる画像URL。 | ✅ |
| 説明 | 弦 | | 共有メディアの説明。 | |
| 窓幅 | 番号 | 1000 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 730 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 窓幅 | 番号 | 550 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 400 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| タグ | Array<string> | | | |
| キャプション | 弦 | | 共有ページの説明。 | |
| ポストタイプ | 弦 | link | | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 経由 | 弦 | | | |
| ハッシュタグ | 配列 | | | |
| 関連している | 配列 | | | |
| 窓幅 | 番号 | 550 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 400 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| セパレーター | | | | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 画像 | 弦 | | 共有される画像URL。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 550 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
weiboiconの小道具
? 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| セパレーター | 弦 | | | |
| 窓幅 | 番号 | 550 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 400 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
Whatsappiconの小道具
? LinkedIn
?コード
import {
LinkedinShareButton ,
LinkedinIcon ,
} from 'next-share'
< LinkedinShareButton url = { 'https://github.com/next-share' } >
< LinkedinIcon size = { 32 } round />
</ LinkedinShareButton > LinkedInShareButtonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| 窓幅 | 番号 | 750 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 600 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 画像 | 弦 | | 共有される画像への絶対的なリンク。 | |
| noparse | ブール | | Trueが渡された場合、VKはURL情報を取得しません。 | |
| novklinks | ブール | | trueが渡された場合、開いたウィンドウにユーザーのプロファイルへのリンクはありません。モバイルデバイスのみ。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 説明 | 弦 | | 共有ページの説明。 | |
| Imageurl | 弦 | | 共有ページの画像URL。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 説明 | 弦 | | 共有ページの説明。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
LiveJournaliconの小道具
?職場
?コード
import {
WorkplaceShareButton ,
WorkplaceIcon ,
} from 'next-share'
< WorkplaceShareButton
url = { 'https://github.com/next-share' }
quote = { 'Next Share' }
>
< WorkplaceIcon size = { 32 } round />
</ WorkplaceShareButton > WorkPlaceShareButtonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| 引用 | 弦 | | | |
| ハッシュタグ | 弦 | | | |
| 窓幅 | 番号 | 550 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 400 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
職場の小道具
?ポケット
?コード
import {
PocketShareButton ,
PocketIcon ,
} from 'next-share'
< PocketShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< PocketIcon size = { 32 } round />
</ PocketShareButton > ポケットシェアボタンの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 Pocketが保存されているページ上のタイトルタグを検出した場合、このパラメーターは無視され、保存されたページのタイトルタグが代わりに使用されます。 | |
| 窓幅 | 番号 | 500 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 500 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
Pocketicon Props
? Instapaper
?コード
import {
InstapaperShareButton ,
InstapaperIcon ,
} from 'next-share'
< InstapaperShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< InstapaperIcon size = { 32 } round />
</ InstapaperShareButton > instapapersharebuttonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 説明 | 弦 | | 共有ページの説明。 | |
| 窓幅 | 番号 | 500 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 500 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
Instapapericonの小道具
?憎しみ
?コード
import {
HatenaShareButton ,
HatenaIcon ,
} from 'next-share'
< HatenaShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< HatenaIcon size = { 32 } round />
</ HatenaShareButton > hatenasharebuttonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 460 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
憎しみの小道具
? FacebookMessenger
?コード
import {
FacebookMessengerShareButton ,
FacebookMessengerIcon ,
} from 'next-share'
< FacebookMessengerShareButton
url = { 'https://github.com/next-share' }
appId = { '' }
>
< FacebookMessengerIcon size = { 32 } round />
</ FacebookMessengerShareButton > FacebookMessengershareButtonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| appid | 弦 | | FacebookアプリケーションID。 | ✅ |
| redirecturi | 弦 | | 共有後にリダイレクトするURL(デフォルト:共有URL)。 | |
| に | 弦 | | 受信者のユーザーID。ダイアログが発生すると、送信者は追加の人を受信者として指定できます。 | |
| 窓幅 | 番号 | 1000 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 820 | 窓の高さを開きました。 | |
| BlankTarget | ブール | 間違い | 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の小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| 主題 | 弦 | | | |
| 体 | 弦 | | | |
| セパレーター | 弦 | | | |
| BlankTarget | ブール | 間違い | trueに設定されている場合は、新しいタブで[共有]ウィンドウを開きます。 | |
電子メールの小道具
?ギャブ
?コード
import {
GabShareButton ,
GabIcon ,
} from 'next-share'
< GabShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< GabIcon size = { 32 } round />
</ GabShareButton > gabsharebuttonの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| 子供たち | ノード | | 反応コンポーネント、HTML要素、または文字列。 | ✅ |
| URL | 弦 | | 共有ページのURL。 | ✅ |
| タイトル | 弦 | | 共有ページのタイトル。 | |
| 窓幅 | 番号 | 660 | ウィンドウの幅を開きました。 | |
| Windowheight | 番号 | 640 | 窓の高さを開きました。 | |
ギャビコンの小道具
アイコンの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| サイズ | 番号 | | ピクセルのアイコンサイズ。 | |
| ラウンド | ブール | | ラウンドまたは長方形を表示します。 | |
| borderradius | 番号 | | 丸いアイコンを使用している場合は、丸い角を設定します。 | |
| bgstyle | 物体 | | 背景スタイルをカスタマイズします。 | |
| iconfillcolor | 弦 | white | アイコンの充填色をカスタマイズします。 | |
| BlankTarget | ブール | 間違い | 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 > FacebookShareCountの小道具
| 小道具 | タイプ | デフォルト | 説明 | 必須 |
|---|
| URL | 弦 | | 共有ページのURL。 | ✅ |
| appid | 弦 | | FacebookアプリケーションID。 | ✅ |
| AppSecret | 弦 | | Facebookアプリケーションの秘密。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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。 | ✅ |
| 子供たち | ノード | | 反応コンポーネント、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 | 番号 | | rectアイコンを使用する場合は、丸い角を許可します。 | |
| bgstyle | 物体 | | 背景をカスタマイズします。 | |
| iconfillcolor | 弦 | white | アイコンの充填色をカスタマイズします。 | |
Changelog
最新バージョン0.27.0(2023-09-28):
各リリースの詳細の変更は、changelog.mdで文書化されています。
?まとめ
next-shareのいずれかを改善できると思われる場合は、更新を備えたPRを開いて問題を送信してください。また、私はこれを改善し続けますので、このリポジトリを見て再訪したいと思うかもしれません。
?貢献
プルリクエストを分岐して送信することにより、 next-shareへの貢献に貢献してもらいたいです!
あなたの貢献は心から歓迎され、歓迎され、認められ、感謝されています。 (✿◠‿◠)
貢献方法:
- 改善されたオープンプルリクエスト
- 問題のアイデアについて話し合う
- 言葉を広めます
- フィードバックで手を差し伸べます
貢献者
bunlong | アーチュールkirtovskis | ショーン | スティーブ・スカボ | マディ・ミラー | ジョー・マクブルーム |
レナ・コトリアール |
????広告
あなたは多分興味があります。
- Reactパターン - React Developerの開発で使用する反応パターンとテクニック。
- React Papaparse - Reactの最速のブラウザーCSV(または区切りテキスト)パーサー。
- 次のQRcode - 次のReactアプリのQRコードを生成するためのReactフック。
- 次回の前 - 次のReactアプリの軽量の小さなタイムアゴコンポーネント。
⚖️ライセンス
MITライセンス