@mornya/react-social-libs

v4.1.0

Published

8 months ago

The project of React.js Social Share and Widget modules.

Downloads

0High
0Medium
0Low

mornya vessel typescript ecmascript react nextjs front-end social share widget clipboard email facebook flipboard google kakao linkedin naver sms telegram tumblr twitter

React Social Libs

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.

About

React용 소셜 공유 및 위젯 컴포넌트를 제공한다.

Installation

해당 라이브러리를 사용 할 프로젝트에서는 아래와 같이 의존성 모듈로 설치한다.

$ npm install --save @mornya/react-social-libs
or
$ yarn add @mornya/react-social-libs

How to use?

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', '카카오_스토리_공유'],
    }}
  />
);

Using TypeScript

Social.* 타이핑을 프로젝트 전역에서 사용 할 수 있도록 아래와 같이 tsconfig.json 파일 등에 추가한다.

{
  "include": [
    "node_modules/@mornya/react-social-libs/dist"
  ]
}

Customized button

공유하기 버튼의 경우 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>
);

Meta tags

공유 / 위젯 모듈에서는 기본적으로 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 |

Social modules

상세 설정은 아래 내용 참고.

소셜 공유하기 버튼. 사용 가능한 공유하기 버튼의 종류는 아래와 같다 (ABC순).

밴드
클립보드(Clipboard) 복사
이메일(Email)
Facebook
Flipboard
Gmail
KakaoTalk
Line
LinkedIn
Naver
Reddit
Skype
SMS
Telegram
Tumblr
Twitter

모든 컴포넌트는 공통적으로 아래와 같은 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
}

Band

message: (func) 커스텀 공유 메시지 지정

extra = {
  message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}

Clipboard Copy

message: (func) 커스텀 공유 메시지 지정

extra = {
  message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}

Email

title: (func) 타이틀 문자열
message: (func) 본문 삽입 문자열

extra = {
  title: (og) => og.title,
  message: (og) => `${og.content}\n\n${og.url}`,
}

Facebook

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,
}

Flipboard

message: (func) 커스텀 공유 메시지 지정

extra = {
  message: (og) => `[${og.title}] ${og.content}`,
}

Gmail

title: (func) 타이틀 문자열
message: (func) 본문 삽입 문자열

extra = {
  title: (og) => og.title,
  message: (og) => `${og.content}\n\n${og.url}`,
}

KakaoTalk

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,
}

Line

message: (func) 커스텀 공유 메시지 지정

extra = {
  message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}

사용되는 extra 없음

Naver

title: (func) 타이틀 문자열

extra = {
  title: (og) => og.title,
}

NaverBlog

title: (func) 타이틀 문자열

extra = {
  title: (og) => og.title,
}

title: (func) 타이틀 문자열

extra = {
  title: (og) => og.title,
}

Skype

message: (func) 본문 메시지 문자열

extra = {
  message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}

SMS

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) => ``,
}

Tumblr

title: (func) 타이틀 문자열
message: (func) 본문 삽입 문자열

extra = {
  title: (og) => og.title,
  message: (og) => og.content,
}

Twitter

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
}

FacebookLike

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) => {},
}

FlipboardFlipit

profileUrl: (string) 팬 페이지 URL (ex. 'mornya')
popover: (string) 마우스 오버시 팝오버 메시지

extra = {
  profileUrl: '',
  popover: 'Flip it!',
}

KakaoStoryFollow

appId: (string) 카카오 API에 등록된 appId
subscribeChannelId: (string) 팔로우(구독) 대상 채널 ID (예를 들어, 'mornya'로 입력하면 실제 구독 대상 채널은 http://story.kakao.com/ch/mornya/app 입니다)
showFollowerCount: (bool) 구독 횟수 카운트를 버튼 옆에 표시 할 지 여부

extra = {
  appId: '',
  subscribeChannelId: '',
  showFollowerCount: true,
}

TumblrFollow

tumblelog: (string) 팔로우 할 텀블로그명 (ex. 'mornya')

extra = {
  tumblelog: '',
}

TumblrPost

없음

TwitterFollow

screenName: (string) 팔로우 할 대상 스크린네임 (ex. '@mornyacom')

extra = {
  screenName: '',
  showScreenName: false,
}

TwitterMessage

screenName: (string) 메시지 보낼 대상 스크린네임 (ex. '@mornyacom')
recipientId: (string) 수신 대상자 목록
hashtags: (array) 공유 후 메시지에 노출되는 해시태그 문자열 목록

extra = {
  screenName: '',
  recipientId: '',
  hashtags: [],
}

TwitterTweet

hashtags: (array) 트윗 후 메시지에 노출되는 해시태그 문자열 목록
showScreenName: (bool) 공유 버튼에 스크린네임을 표시 할 지 여부

extra = {
  hashtags: [],
  showScreenName: false,
}

Change Log

해당 프로젝트의 CHANGELOG.md 파일 참조.

License

해당 프로젝트의 LICENSE 파일 참조.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

React Social Libs

About

Installation

How to use?

Using TypeScript

Customized button

Meta tags

Social modules

Band

Clipboard Copy

Email

Facebook

Flipboard

Gmail

KakaoTalk

Line

LinkedIn

Naver

NaverBlog

Reddit

Skype

SMS

Telegram

Tumblr

Twitter

FacebookLike

FlipboardFlipit

KakaoStoryFollow

TumblrFollow

TumblrPost

TwitterFollow

TwitterMessage

TwitterTweet

Change Log

License