React.js Social Share and Widget library.
This project has been created by Vessel CLI. For a simple and quick reference about it, click here.
해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.
$ npm install --save @mornya/react-social-libs
or
$ yarn add @mornya/react-social-libs
SPA 혹은 Next.js
등의 SSR 형태의 앱에서 모두 아래와 같이 바로 사용이 가능하다.
라이브러리 내 스타일 시트
share.css
는 정적이나 동적으로 import 하도록 하며, 혹은 해당 css 파일을 참조하여 커스터마이징 된 css를 생성하여 사용한다.
import React from 'react';
import { Share, Widget } from '@mornya/react-social-libs';
import '@mornya/react-social-libs/dist/social.css';
export default () => (
<>
<div>
<Share.Facebook extra={{ ... }}/>
<Share.KakaoTalk/>
</div>
<div>
<Widget.FacebookLike extra={{ ... }}/>
</div>
</>
);
또한 개별 공유 컴포넌트 사용을 위해 아래와 같이 import 할 수 있다.
import React from 'react';
import { KakaoStory } from '@mornya/react-social-libs/dist/share/KakaoStory';
export default () => (
<KakaoStory
title="카카오스토리 공유"
extra={{
appId: 'xxxxxxxxxxxxxxxx',
hashtags: ['mornya', '카카오_스토리_공유'],
}}
/>
);
Social.*
타이핑을 프로젝트 전역에서 사용 할 수 있도록 아래와 같이 tsconfig.json
파일 등에 추가한다.
{
"include": [
"node_modules/@mornya/react-social-libs/dist"
]
}
공유하기 버튼의 경우 children으로 버튼 아이콘 및 모양을 지정할 수 있다.
import React from 'react';
import { Naver as ShareNaver } from '@mornya/react-social-libs/dist/share/Naver';
export default () => (
<ShareNaver
title="네이버 공유"
extra={{ title: (OG) => `[네이버 홈 공유] ${OG.description}` }}
>
<img
src="https://blog.kakaocdn.net/dn/tfdqL/btqB2H454gr/VeiTKsIcomeWSznAnPc3JK/img.png"
alt="NAVER"
width={64}
/>
</ShareNaver>
);
공유 / 위젯 모듈에서는 기본적으로 OpenGraph 포함한 메타태그 값을 참조하여 활용한다. 아래는 참조되는 메타태그이며, 참조에 필요한 값은 페이지 <head> 영역에 메타태그를 선언해주면 된다.
<head>
<meta property="og:title" content="제목" />
<meta name="keywords" content="공유, 위젯, 소셜" />
<!-- ... -->
</head>
각 컴포넌트의 props 중, extra
의 title
, message
는 OG 값을 파라미터로 받는 함수이며 string으로 리턴해주면 해당 값에 따른 공유 제목, 메시지를 커스터마이즈 하여 보여준다.
import React from 'react';
import { Email as ShareEmail } from '@mornya/react-social-libs/dist/share/Email';
export default () => (
<ShareEmail
extra={{
title: (og) => og.title,
message: (og) => `${og.content}\n\n${og.url}`,
}}
/>
);
OG 파라미터 값에 해당하는 항목은 아래와 같다.
종류 | 참조하는 메타태그 값 |
---|---|
title | og:title |
description | og:description |
url | og:url |
type | og:type |
siteName | og:siteName |
image | og:image |
keywords | keywords |
videoDuration (og:type이 video.movie일 경우) |
video:duration |
musicDuration (og:type이 music.song일 경우) |
music:duration |
상세 설정은 아래 내용 참고.
공유하기 버튼
소셜 공유하기 버튼. 사용 가능한 공유하기 버튼의 종류는 아래와 같다 (ABC순).
- 밴드
- 클립보드(Clipboard) 복사
- 이메일(Email)
- Gmail
- KakaoTalk
- Line
- Naver
- Skype
- SMS
- Telegram
- Tumblr
모든 컴포넌트는 공통적으로 아래와 같은 props를 전달할 수 있다.
-
title
: (string) 마우스 오버시 나타나는 문자열. -
extra
: (object) 공유 버튼 별 사용되는 특별 인자 값. -
defaultIconSize
: (number) 기본 아이콘 사용시 (children이 존재하지 않을 경우) 아이콘의 가로 및 세로 픽셀. -
children
: (node) 공유 버튼을 커스텀하게 꾸미고 싶을 경우 버튼 하위 컴포넌트를 지정해 줄 수 있음. -
className
: (string) 공유 버튼의 클래스 지정. -
style
: (object) 공유 버튼의 스타일 지정. -
onBefore
: (func) 공유 버튼이 클릭되면 공유하기 기능 실행에 앞서 지정된 해당 콜백함수가 실행된다. -
onComplete
: (func) 공유 버튼이 클릭된 후 공유가 완료되었을 때 지정된 해당 콜백함수가 실행된다. -
onError
: (func) 공유 진행 중 오류가 발생되었을 경우 지정된 해당 콜백함수가 실행된다.
위 props 중 extra 값을 지정해야 할 경우 아래와 같이 공유 버튼 별 지정 방식에 맞춰 선언한다.
파라미터로 전달되는
og
값은 공유하기 컴포넌트에서 전달해 주는 OpenGraph 태그 속성 값 객체.<meta property="og:title" content=""/>
식으로 페이지 헤더에 정의된 메타태그에서 추출 됨.
og = {
title,
description,
image,
url,
type,
site_name
}
message
: (func) 커스텀 공유 메시지 지정
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
message
: (func) 커스텀 공유 메시지 지정
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
title
: (func) 타이틀 문자열
message
: (func) 본문 삽입 문자열
extra = {
title: (og) => og.title,
message: (og) => `${og.content}\n\n${og.url}`,
}
appId
: (string) 페이스북 API에 등록된 appId
permissions
: (array) 사용하고자 하는 퍼미션 목록
caption
: (string) 공유 후 페이스북에 노출되는 화면의 caption 항목
title
: (func) 공유 후 페이스북에 노출되는 화면의 title 항목
message
: (func) 공유 후 페이스북에 노출되는 화면의 message 항목
admins
: (string) 페이스북 API 참조
isUseOAuth
: (bool) OAuth2를 이용한 공유를 실행할지, 링크 공유를 실행할지의 여부
isDebug
: (bool) 디버깅용 API를 호출할지, 프로덕션용을 호출할지 여부
extra = {
appId: '',
permissions: [ 'public_profile', 'email', 'user_friends' ], // 기본 권한만! 추가 필요권한은 option 파라미터로 인입해야 함
caption: '',
title: (og) => og.title,
message: (_og) => '',
admins: '',
isUseOAuth: true,
isDebug: false,
}
message
: (func) 커스텀 공유 메시지 지정
extra = {
message: (og) => `[${og.title}] ${og.content}`,
}
title
: (func) 타이틀 문자열
message
: (func) 본문 삽입 문자열
extra = {
title: (og) => og.title,
message: (og) => `${og.content}\n\n${og.url}`,
}
appId
: (string) 카카오 API에 등록된 appId
message
: (func) 공유 후 카카오톡에 노출되는 화면의 내용 항목
image
: (func) 공유 후 카카오톡에 노출되는 이미지
width
: (number) 공유 후 카카오톡에 노출되는 이미지 너비
height
: (number) 공유 후 카카오톡에 노출되는 이미지 높이
extra = {
appId: '',
message: (og) => `${og.title}\n${og.content}`,
image: (og) => og.image,
width: 300,
height: 200,
}
message
: (func) 커스텀 공유 메시지 지정
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
사용되는 extra 없음
title
: (func) 타이틀 문자열
extra = {
title: (og) => og.title,
}
title
: (func) 타이틀 문자열
extra = {
title: (og) => og.title,
}
title
: (func) 타이틀 문자열
extra = {
title: (og) => og.title,
}
message
: (func) 본문 메시지 문자열
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
message
: (func) 본문 메시지 문자열
target
: (string) 핸드폰 번호나 E-mail 등의 공유 대상 지정
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
target: '',
}
message
: (func) 추가 채팅 메시지 (공유 메시지와는 별개)
extra = {
message: (og) => ``,
}
title
: (func) 타이틀 문자열
message
: (func) 본문 삽입 문자열
extra = {
title: (og) => og.title,
message: (og) => og.content,
}
message
: (func) 본문 삽입 문자열
hashtags
: (array) 공유 후 트위터에 노출되는 해시태그 문자열 목록
extra = {
message: (og) => `[${og.title}]\n${og.content}`,
hashtags: [],
}
위젯
소셜 위젯 기능. 사용 가능한 위젯의 종류는 아래와 같다.
- FacebookLike
- FlipboardFlipit
- KakaoStoryFollow
- TumblrFollow
- TumblrPost
- TwitterFollow
- TwitterMessage
- TwitterTweet
모든 컴포넌트는 공통적으로 아래와 같은 props를 전달할 수 있다.
-
extra
: (object) 공유 버튼 별 사용되는 특별 인자 값. -
children
: (node) 공유 버튼을 커스텀하게 꾸미고 싶을 경우 버튼 하위 컴포넌트를 지정해 줄 수 있다. -
className
: (string) 공유 버튼의 클래스 지정. -
style
: (object) 공유 버튼의 스타일 지정.
위 props 중 extra 값을 지정해야 할 경우 아래와 같이 공유 버튼 별 지정 방식에 맞춰 선언한다.
파라미터로 전달되는
og
값은 공유하기 컴포넌트에서 전달해 주는 OpenGraph 태그 속성 값 객체.<meta property="og:title" content=""/>
식으로 페이지 헤더에 정의된 메타태그에서 추출 됨.
og = {
title,
description,
image,
url,
type,
site_name
}
appId
: (string) 페이스북 API에 등록된 appId
pageUrl
: (string) "좋아요" 대상 페이지 URL
isDark
: (bool) 다크 칼라 스킴 사용 여부
isDebug
: (bool) 디버깅용 API를 호출할지, 프로덕션용을 호출할지 여부
onLogin
: (func) 페이스북 계정 로그인 이벤트 발생시 콜백함수
onLogout
: (func) 페이스북 계정 로그아웃 이벤트 발생시 콜백함수
onLike
: (func) "좋아요" 버튼 클릭 이벤트 발생시 콜백함수 (API 퍼미션 리뷰 필요)
onUnlike
: (func) "좋아요" 버튼 클릭 해제 이벤트 발생시 콜백함수 (API 퍼미션 리뷰 필요)
extra = {
appId: '',
pageUrl: '',
isDark: false,
isDebug: false,
onLogin: (response) => {},
onLogout: (response) => {},
onLike: (response) => {},
onUnlike: (response) => {},
}
profileUrl
: (string) 팬 페이지 URL (ex. 'mornya')
popover
: (string) 마우스 오버시 팝오버 메시지
extra = {
profileUrl: '',
popover: 'Flip it!',
}
appId
: (string) 카카오 API에 등록된 appId
subscribeChannelId
: (string) 팔로우(구독) 대상 채널 ID (예를 들어, 'mornya'로 입력하면 실제 구독 대상 채널은 http://story.kakao.com/ch/mornya/app 입니다)
showFollowerCount
: (bool) 구독 횟수 카운트를 버튼 옆에 표시 할 지 여부
extra = {
appId: '',
subscribeChannelId: '',
showFollowerCount: true,
}
tumblelog
: (string) 팔로우 할 텀블로그명 (ex. 'mornya')
extra = {
tumblelog: '',
}
없음
screenName
: (string) 팔로우 할 대상 스크린네임 (ex. '@mornyacom')
extra = {
screenName: '',
showScreenName: false,
}
screenName
: (string) 메시지 보낼 대상 스크린네임 (ex. '@mornyacom')
recipientId
: (string) 수신 대상자 목록
hashtags
: (array) 공유 후 메시지에 노출되는 해시태그 문자열 목록
extra = {
screenName: '',
recipientId: '',
hashtags: [],
}
hashtags
: (array) 트윗 후 메시지에 노출되는 해시태그 문자열 목록
showScreenName
: (bool) 공유 버튼에 스크린네임을 표시 할 지 여부
extra = {
hashtags: [],
showScreenName: false,
}
해당 프로젝트의 CHANGELOG.md 파일 참조.
해당 프로젝트의 LICENSE 파일 참조.