Have ideas to improve npm?Join in the discussion! »

    @mornya/react-social-libs
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.5 • Public • Published

    React Social Libs

    npm node types downloads license

    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 파일 참조.

    Install

    npm i @mornya/react-social-libs

    DownloadsWeekly Downloads

    3

    Version

    3.0.5

    License

    ISC

    Unpacked Size

    269 kB

    Total Files

    97

    Last publish

    Collaborators

    • avatar