README

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 형태의 앱에서는 아래와 같이 바로 사용이 가능하다.

라이브러리 내 share.css를 import 해야 한다. 혹은 해당 css 파일을 참조하여 커스터마이징 된 css를 이용한다.

import React from 'react';
import { Share, Widget } from '@mornya/react-social-libs';
import '@mornya/react-social-libs/dist/res/share.css';

export default () => (
  <>
    <div>
      <Share.Facebook/>
      <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 () => (
  <div>
    <KakaoStory
      title="카카오스토리 공유"
      extra={{
        appId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        hashtags: ['mornya', '카카오_스토리_공유'],
      }}
    />
  </div>
)

다만 Next.js 등 SSR을 이용시 아래와 같이 컴포넌트를 동적 로딩 처리를 해주어야 실행이 된다.

import React, { useState, useEffect } from 'react';

export default () => {
  const [Share, setShare] = useState();

  useEffect(() => {
    import('@mornya/react-social-libs')
      .then(({ Loader, Share: ShareComponents }) => {
        Loader.initKakaoSDK(Configure.socialKakaoAppId);
        Loader.initFacebookSDK(Configure.socialFacebookAppId, !Configure.isProduction);
        setShare(ShareComponents);
      })
      .catch(() => {});
  }, []);

  return Share ? (
    <>
      <Share.Facebook/>
      <Share.KakaoTalk/>
    </>
  ) : null;
}

Additional documents

각 Share / Widget 컴포넌트 별 props에 대한 상세 설정은 Social Share, Social Widget 참고.

Change Log

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

License

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

Usage no npm install needed!