차세대
다음 React 앱에 대한 소셜 미디어 공유 버튼.
? 특징
- 의존성 없음
- JavaScript 및 TypeScript와 호환됩니다
- 다음 React 앱에 대한 버튼을 공유하십시오
- 페이스 북
- 선
- Pinterest
- 레딧
- 전보
- 텀블러
- 지저귀다
- viber
- 와이보
- whatsapp
- LinkedIn
- vkshare
- Mailru
- LiveJournal
- 직장
- 포켓
- Instapaper
- 하테나
- FacebookMessenger
- 이메일
- 갈고리
- 점유율 수
- Facebooksharecount
- Hatenasharecount
- OKSHARECOUNT
- PinterestShareCount
- tumblrsharecount
- vksharecount
- 아이콘
? 설치하다
NPM에서 차세대를 사용할 수 있습니다. 다음 명령으로 설치할 수 있습니다.
npm install next-share --save
차세대 공유는 원사에서도 제공됩니다. 다음 명령으로 설치할 수 있습니다.
yarn add next-share --save
ShareButton의 사용
? 페이스 북
? 코드
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 Props
? 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 | 숫자 | 1000 | 개방 된 창 너비. | |
| WindowHeight | 숫자 | 730 | 열린 창 높이. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
Pinteresticon Props
? 레딧
? 코드
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 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
레드 디언 소품
? 전보
? 코드
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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| Windowwidth | 숫자 | 550 | 개방 된 창 너비. | |
| WindowHeight | 숫자 | 400 | 열린 창 높이. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
Telegramicon Props
? 텀블러
? 코드
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 | | |
| Windowwidth | 숫자 | 660 | 개방 된 창 너비. | |
| WindowHeight | 숫자 | 460 | 열린 창 높이. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
Tumblicon 소품
? 지저귀다
? 코드
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 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
트위터 시콘 소품
? 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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| 분리 기호 | | | | |
| Windowwidth | 숫자 | 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. | |
| 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 > LinkedInshareButton 소품
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 어린이들 | 마디 | | 반응 구성 요소, HTML 요소 또는 문자열. | ✅ |
| URL | 끈 | | 공유 페이지의 URL. | ✅ |
| Windowwidth | 숫자 | 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 Props
? 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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| 영상 | 끈 | | 공유 될 이미지에 대한 절대 링크. | |
| 아파르 | 부울 | | True가 통과되면 VK는 URL 정보를 검색하지 않습니다. | |
| NOVKLINKS | 부울 | | True가 통과되면 열린 창에 사용자의 프로필에 대한 링크가 없습니다. 모바일 장치에만 해당됩니다. | |
| 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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| 설명 | 끈 | | 공유 페이지에 대한 설명. | |
| imageUrl | 끈 | | 공유 페이지의 이미지 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 Props
? 직장
? 코드
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 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
작업장 소품
? 포켓
? 코드
import {
PocketShareButton ,
PocketIcon ,
} from 'next-share'
< PocketShareButton
url = { 'https://github.com/next-share' }
title = { 'Next Share' }
>
< PocketIcon size = { 32 } round />
</ PocketShareButton > 포켓 셰어 부튼 소품
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 어린이들 | 마디 | | 반응 구성 요소, HTML 요소 또는 문자열. | ✅ |
| URL | 끈 | | 공유 페이지의 URL. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. 포켓이 저장되는 페이지의 제목 태그를 감지하면이 매개 변수가 무시되고 저장된 페이지의 제목 태그가 대신 사용됩니다. | |
| Windowwidth | 숫자 | 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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| 설명 | 끈 | | 공유 페이지에 대한 설명. | |
| Windowwidth | 숫자 | 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. | ✅ |
| 제목 | 끈 | | 공유 페이지의 제목. | |
| Windowwidth | 숫자 | 660 | 개방 된 창 너비. | |
| WindowHeight | 숫자 | 460 | 열린 창 높이. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
Hatenaicon Props
? 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. | ✅ |
| 리디렉터리 | 끈 | | 공유 후 리디렉션 할 URL (기본값 : 공유 URL). | |
| 에게 | 끈 | | 수신자의 사용자 ID. 대화 상자가 등장하면 발신자는 추가 인력을 수신자로 지정할 수 있습니다. | |
| Windowwidth | 숫자 | 1000 | 개방 된 창 너비. | |
| WindowHeight | 숫자 | 820 | 열린 창 높이. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
FacebookMessengericon Props
? 이메일
? 코드
import {
EmailShareButton ,
EmailIcon ,
} from 'next-share'
< EmailShareButton
url = { 'https://github.com/next-share' }
subject = { 'Next Share' }
body = "body"
>
< EmailIcon size = { 32 } round />
</ EmailShareButton > 이메일 ShareButton 소품
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 어린이들 | 마디 | | 반응 구성 요소, 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 | 열린 창 높이. | |
가비콘 소품
아이콘 소품
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 크기 | 숫자 | | 픽셀의 아이콘 크기. | |
| 둥근 | 부울 | | 라운드 또는 사각형을 보여줍니다. | |
| Borderradius | 숫자 | | 둥근 아이콘을 사용하는 경우 둥근 모서리를 설정하십시오. | |
| bgstyle | 물체 | | 배경 스타일을 사용자 정의하십시오. | |
| ICONFILLCOLOR | 끈 | white | 아이콘 채우기 색상을 사용자 정의합니다. | |
| blanktarget | 부울 | 거짓 | true 로 설정된 경우 새 탭에서 공유 창을 엽니 다. | |
ShareCount 사용
? 페이스 북
? 코드
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
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 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 Props
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 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 Props
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| URL | 끈 | | 공유 페이지의 URL. | ✅ |
| 어린이들 | 마디 | | 반응 구성 요소, HTML 요소 또는 문자열. | |
? 텀블러
? 코드
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
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 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 props
| 소품 | 유형 | 기본 | 설명 | 필수의 |
|---|
| 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 | 숫자 | | 직장 아이콘을 사용하는 경우 둥근 모서리를 허용합니다. | |
| bgstyle | 물체 | | 배경을 사용자 정의하십시오. | |
| ICONFILLCOLOR | 끈 | white | 아이콘 채우기 색상을 사용자 정의합니다. | |
changelog
최신 버전 0.27.0 (2023-09-28) :
각 릴리스의 세부 사항 변경 사항은 Changelog.md에 문서화되어 있습니다.
? 마무리
next-share 개선 될 수 있다고 생각되면 업데이트와 함께 PR을 열고 문제를 제출하십시오. 또한, 나는 이것을 계속 개선 할 것이므로, 당신은이 저장소를보고/별을 다시보고 싶을 수도 있습니다.
? 기부금
우리는 Forking과 Pull 요청을 보내서 next-share 에 대한 기부금에 도움을주고 싶습니다!
귀하의 기여는 진심으로 환영하고 인정 받고 감사합니다. (✿◠‿◠)
기여하는 방법 :
- 개선 된 풀 요청
- 문제의 아이디어에 대해 토론하십시오
- 말씀을 전하십시오
- 피드백으로 연락하십시오
기고자
Bunlong | Arturs Kirtovskis | 숀 | 스티브 스카보 | 매디 밀러 | Joe McBroom |
Lena Kotlyar |
? ? ? 광고
당신은 아마 관심이 있습니다.
- React Patterns - React Patterns & Techniques, React 개발자를위한 개발에 사용합니다.
- REACT PAPAPARSE-가장 빠른 브라우저 내 CSV (또는 구분 된 텍스트) 파서를 반응합니다.
- 다음 QRCode - 다음 React 앱에 대한 QR 코드를 생성하기위한 반응 후크.
- 다음 번에-다음 React 앱을위한 가벼운 작은 시간-계산 구성 요소입니다.
⚖️ 라이센스
MIT 라이센스