หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>โค้ดแหล่งที่มา AI
ดาวน์โหลด

ร่วมกัน

ปุ่มแชร์โซเชียลมีเดียสำหรับแอพตอบสนองต่อไปของคุณ

- คุณสมบัติ

  • ไม่มีการพึ่งพา
  • เข้ากันได้กับทั้ง JavaScript และ TypeScript
  • แชร์ปุ่มสำหรับแอป React ถัดไปของคุณ
    • Facebook
    • เส้น
    • Pinterest
    • สีแดง
    • โทรเลข
    • tumblr
    • Twitter
    • เวียน
    • Weibo
    • Whatsapp
    • LinkedIn
    • vkshare
    • mailru
    • LiveJournal
    • สถานที่ทำงาน
    • กระเป๋า
    • เครื่องวัด
    • Hatena
    • FacebookMessenger
    • อีเมล
    • การพูดคุย
  • แบ่งปันจำนวน
    • FacebookSharecount
    • Hatenasharecount
    • Oksharecount
    • Pinterestsharecount
    • Tumblrsharecount
    • vksharecount
  • ไอคอน

- ติดตั้ง

Next-Share มีให้บริการใน NPM สามารถติดตั้งได้ด้วยคำสั่งต่อไปนี้: 

 npm install next-share --save

Next-Share มีให้ในเส้นด้ายเช่นกัน สามารถติดตั้งได้ด้วยคำสั่งต่อไปนี้: 

 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 ของหน้าแบ่งปัน
อ้าง สาย ใบเสนอราคาที่จะแบ่งปัน
แฮชแท็ก สาย แฮชแท็กที่จะแบ่งปัน
Windowwidth ตัวเลข 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
Windowwidth ตัวเลข 500 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 500 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น 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

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง
url สาย URL ของหน้าแบ่งปัน
สื่อ สาย URL รูปภาพที่จะถูกตรึง
คำอธิบาย สาย คำอธิบายของสื่อที่ใช้ร่วมกัน
Windowwidth ตัวเลข 1,000 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 730 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Pinteresticon

- สีแดง

? ‍ รหัส 

 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
Windowwidth ตัวเลข 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 Props

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง
url สาย URL ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
Windowwidth ตัวเลข 550 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 400 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉากโทรเลข

- 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>
คำบรรยายภาพ สาย คำอธิบายของหน้าแบ่งปัน
postype สาย link
Windowwidth ตัวเลข 660 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 460 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉากของ Tumblricon

- Twitter

? ‍ รหัส 

 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
ทาง สาย
แฮชแท็ก อาร์เรย์
ที่เกี่ยวข้อง อาร์เรย์
Windowwidth ตัวเลข 550 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 400 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Twittericon

- เวียน

? ‍ รหัส 

 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
เครื่องแยก
Windowwidth ตัวเลข 660 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 460 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Vibericon

- Weibo

? ‍ รหัส 

 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 รูปภาพที่จะถูกแชร์
Windowwidth ตัวเลข 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
เครื่องแยก สาย
Windowwidth ตัวเลข 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 >

Props LinkedInsharebutton

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง
url สาย URL ของหน้าแบ่งปัน
Windowwidth ตัวเลข 750 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 600 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

คุณใช้สิ่งต่าง ๆ เช่น title summary ฯลฯ ได้อย่างไร?

ใช้แท็ก og ในบล็อก <head> ของ HTML 

 < 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
ภาพ สาย ลิงค์ที่แน่นอนไปยังภาพที่จะแชร์
คนโง่ บูลีน หากผ่านจริง VK จะไม่ดึงข้อมูล URL
Novklinks บูลีน หากผ่านจริงจะไม่มีลิงก์ไปยังโปรไฟล์ของผู้ใช้ในหน้าต่างเปิด สำหรับอุปกรณ์มือถือเท่านั้น
Windowwidth ตัวเลข 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
คำอธิบาย สาย คำอธิบายของหน้าแบ่งปัน
ภาพ สาย URL รูปภาพของหน้าแชร์
Windowwidth ตัวเลข 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อของหน้าแบ่งปัน
คำอธิบาย สาย คำอธิบายของหน้าแบ่งปัน
Windowwidth ตัวเลข 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 ของหน้าแบ่งปัน
อ้าง สาย
แฮชแท็ก สาย
Windowwidth ตัวเลข 550 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 400 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Workplaceicon

- กระเป๋า

? ‍ รหัส 

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

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

Pocketsharebutton อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง
url สาย URL ของหน้าแบ่งปัน
ชื่อ สาย ชื่อเรื่องของหน้าแบ่งปัน โปรดทราบว่าหาก Pocket ตรวจพบแท็กชื่อเรื่องบนหน้าเว็บที่ถูกบันทึกพารามิเตอร์นี้จะถูกละเว้นและแท็กชื่อของหน้าบันทึกจะถูกใช้แทน
Windowwidth ตัวเลข 500 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 500 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก pocketicon

- เครื่องวัด

? ‍ รหัส 

 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อเรื่องของหน้าแบ่งปัน
คำอธิบาย สาย คำอธิบายของหน้าแบ่งปัน
Windowwidth ตัวเลข 500 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 500 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Instapapericon

- Hatena

? ‍ รหัส 

 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อเรื่องของหน้าแบ่งปัน
Windowwidth ตัวเลข 660 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 460 ความสูงของหน้าต่างที่เปิด
blanktarget บูลีน เท็จ เปิดหน้าต่างแชร์ในแท็บใหม่หากตั้งค่าเป็น true

อุปกรณ์ประกอบฉาก Hatenaicon

- FacebookMessenger

? ‍ รหัส 

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

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

อุปกรณ์ประกอบฉาก FacebookMessengersharebutton

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง
url สาย URL ของหน้าแบ่งปัน
ทำให้ดีขึ้น สาย รหัสแอปพลิเคชัน Facebook
เปลี่ยนเส้นทาง สาย URL เพื่อเปลี่ยนเส้นทางไปหลังจากการแชร์ (ค่าเริ่มต้น: URL ที่ใช้ร่วมกัน)
ถึง สาย รหัสผู้ใช้ของผู้รับ เมื่อกล่องโต้ตอบเกิดขึ้นผู้ส่งสามารถระบุคนเพิ่มเติมเป็นผู้รับ
Windowwidth ตัวเลข 1,000 ความกว้างของหน้าต่างที่เปิด
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 Props

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ 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 ของหน้าแบ่งปัน
ชื่อ สาย ชื่อเรื่องของหน้าแบ่งปัน
Windowwidth ตัวเลข 660 ความกว้างของหน้าต่างที่เปิด
windowheight ตัวเลข 640 ความสูงของหน้าต่างที่เปิด

อุปกรณ์ประกอบฉากกาบิคอน

ไอคอนอุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
ขนาด ตัวเลข ขนาดไอคอนเป็นพิกเซล
กลม บูลีน แสดงรอบหรือสี่เหลี่ยมผืนผ้า
ชายแดน ตัวเลข ตั้งมุมโค้งมนถ้าใช้ไอคอนกลม
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 ของหน้าแบ่งปัน
ทำให้ดีขึ้น สาย รหัสแอปพลิเคชัน Facebook
แอพพลิเคชั่น สาย แอปพลิเคชัน Facebook Secret
เด็ก โหนด องค์ประกอบปฏิกิริยา, องค์ประกอบ HTML หรือสตริง

- Hatena

? ‍ รหัส 

 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'

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก พิมพ์ ค่าเริ่มต้น คำอธิบาย ที่จำเป็น
ขนาด ตัวเลข ขนาดไอคอนเป็นพิกเซล
กลม บูลีน ไม่ว่าจะแสดงไอคอนรอบหรือแก้ไข
ชายแดน ตัวเลข อนุญาตมุมโค้งมนหากใช้ไอคอน Rect
bgstyle วัตถุ ปรับแต่งพื้นหลัง
Iconfillcolor สาย white ปรับแต่งไอคอนสีเติม

การเปลี่ยนแปลง

เวอร์ชันล่าสุด 0.27.0 (2023-09-28):

  • อัพเกรด Twittericon

การเปลี่ยนแปลงรายละเอียดสำหรับแต่ละรุ่นมีการบันทึกไว้ใน changelog.md

- ห่อหุ้ม

หากคุณคิดว่าสามารถปรับปรุง next-share ได้โปรดเปิดการประชาสัมพันธ์ด้วยการอัปเดตและส่งปัญหาใด ๆ นอกจากนี้ฉันจะปรับปรุงสิ่งนี้ต่อไปดังนั้นคุณอาจต้องการดู/แสดงที่เก็บนี้เพื่อกลับมาอีกครั้ง

- ผลงาน

เราชอบที่จะมีส่วนร่วมในการบริจาคให้กับ next-share โดยการฟอร์กิ้งและส่งคำขอดึง!

การมีส่วนร่วมของคุณเป็นอย่างเต็มที่♡ยินดีต้อนรับเป็นที่ยอมรับและชื่นชม ()

วิธีการมีส่วนร่วม:

  • เปิดคำขอดึงพร้อมการปรับปรุง
  • พูดคุยเกี่ยวกับแนวคิดในประเด็นต่างๆ
  • กระจายคำ
  • ติดต่อกับข้อเสนอแนะใด ๆ

ผู้มีส่วนร่วม


ม่าน
Arturs Kirtovskis
ฌอน
Steve Scavo
Maddy Miller
Joe McBroom

Lena Kotlyar

?? โฆษณา

คุณอาจสนใจ

  • รูปแบบการตอบสนอง - รูปแบบการตอบสนองและเทคนิคที่จะใช้ในการพัฒนาสำหรับนักพัฒนาปฏิกิริยา
  • React Papaparse-ตัวแยกวิเคราะห์ CSV (หรือข้อความคั่น) ที่เร็วที่สุดสำหรับ React
  • Next QRCode - React Hooks สำหรับการสร้างรหัส QR สำหรับแอพ React ถัดไปของคุณ
  • ครั้งต่อไปที่ผ่านมา-ส่วนประกอบเวลาเล็ก ๆ ที่มีน้ำหนักเบาสำหรับแอพตอบสนองต่อไปของคุณ

⚖ใบอนุญาต

ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด