react-sns-share v1.0.0

목표하는 것

이 애플리케이션은 사용자가 원하는 페이지를 소셜 네트워킹 시스템에 공유할 수 있는 modal 또는 drawer을 생성합니다.

This application creates a modal or drawer for users to Share their wants pages to Social Networking Systems.

social 종류

• kakao
• line
• naver
• twitter
• band
• email

• facebook

  ※ 공통 url이 있을 때 navigator.share() 사용이 가능한 환경에서는 navigator.share(), 그 외에는 clipboard 복사 기능 노출

react-sns-share 설치

npm install react-sns-share

사용법

애플리케이션 루트에 있는 컴포넌트들을 SnsShareDrawerProvider 컴포넌트로 감싸고 style.css를 import합니다.

-> 하위 component에서 useSnsShareDrawer hook 사용이 가능합니다.

-> 기본 drawer/modal 스타일이 적용됩니다.

사용법 (예시)

App.tsx

• defaultData (초기값) 설정

function App() {
  const defaultData = {
    width: 0,
    height: 0,
    imageUrl: "",
    usable: true,
    snsData: {
      kakao: {
        kakaoId: "",
        title: "kakao test title",
        description: "test description",
        imageUrl: "",
        link: "https://test.com",
        btnTitle: "공유하기",
        btnLink: "https://test.com",
        usable: true,
      },
      line: {
        title: "line test title",
        url: "https://test.com",
        width: 0,
        height: 0,
        usable: true,
      },
      naver: {
        title: "naver test title",
        url: "https://test.com",
        width: 0,
        height: 0,
        usable: true,
      },
      twitter: {
        text: "twitter test title",
        url: "https://test.com",
        hashtags: "hashtag1, hashtags2",
        width: 0,
        height: 0,
        usable: true,
      },
      band: {
        message: "band test title",
        url: "https://test.com",
        width: 0,
        height: 0,
        usable: true,
      },
      email: {
        addressee: "test1@gmail.com, test2@gmail.com",
        subject: "email test title",
        body: "https://test.com",
        usable: true,
      },
      facebook: {
        url: "https://test.com",
        width: 0,
        height: 0,
        usable: true,
      },
    },
  };

  return (
    // context api를 사용하기 위해선 App.tsx에서 context 관련 컴포넌트로 감싸줘야함
    // App.tsx에서 SnsShareDrawerProvider 컴포넌트를 선언해주면 모든 페이지에서 useSnsShareDrawer hook 사용 가능!
    <SnsShareDrawerProvider defaultData={defaultData}>
      {children}
    </SnsShareDrawerProvider>
  );
}

export default App;

social share 모달 사용을 희망하는 파일

const { onOpen } = useSnsShareDrawer(); // hook 불러오기

// App.tsx에서 세팅한 defaultProps 값을 사용할 때
const onClickOpenModal = useCallback(() => {
  onOpen();
}, [onOpen]);

// 각각의 페이지에서 social share를 커스텀 하고 싶을 때
const onClickOpenModal2 = useCallback(() => {
  onOpen(
    {
      url: "https://test.com",
      title: "공유하기 공통 test title",
      description: "공유하기 공통 test description",
      imageUrl: "",
      width: 0,
      height: 0,
      usable: true,
      snsData: {
        kakao: {
          kakaoId: "",
          title: "kakao test title222",
          description: "test description222",
          imageUrl: "",
          link: "https://test.com",
          btnTitle: "공유하기222",
          btnLink: "https://test.com",
          usable: false,
        },
        line: {
          title: "line test title222",
          url: "https://test.com",
          width: 0,
          height: 0,
          usable: true,
        },
        naver: {
          title: "naver test title222",
          url: "https://test.com",
          width: 0,
          height: 0,
          usable: true,
        },
        twitter: {
          text: "twitter test title222",
          url: "https://test.com",
          hashtags: "hashtag1, hashtags2, hashtags3, hashtags4",
          width: 0,
          height: 0,
          usable: true,
        },
        band: {
          message: "band test title222",
          url: "https://test.com",
          width: 0,
          height: 0,
          usable: true,
        },
        email: {
          addressee:
            "test1@gmail.com, test2@gmail.com, test3@gmail.com, test4@gmail.com",
          subject: "email test title222",
          body: "https://test.com",
          usable: true,
        },
        facebook: {
          url: "https://test.com",
          width: 0,
          height: 0,
          usable: true,
        },
      },
    },
    false
  );
}, [onOpen]);

속성

공통 data

snsData

• kakao | key | type | snsData required | | ----------- | ------- | ------------- | | kakaoId | string |O | | title | string | O | | description | string | X | | imageUrl | string | O (not null) | | link | string | O | | btnTitle | string | X | | btnLink | string | X | | usable | boolean | O (default false) |

• line | key | type | snsData required | | ----------- | ------- | ------------- | | title | string | X | | url | string | O | | width | number | X | | height | number | X | | usable | boolean | O (default false) |

• naver | key | type | snsData required | | ----------- | ------- | ------------- | | title | string | O | | url | string | O | | width | number | X | | height | number | X | | usable | boolean | O (default false) |

• twitter | key | type | snsData required | | ----------- | ------- | ------------- | | text | string | X | | url | string | O | | hashtags | string | X | | width | number | X | | height | number | X | | usable | boolean | O (default false) |

• band | key | type | snsData required | | ----------- | ------- | ------------- | | message | string | X | | url | string | O | | width | number | X | | height | number | X | | usable | boolean | O (default false) |

• email | key | type | snsData required | | ----------- | ------- | ------------- | | addressee | string | X | | subject | string | X | | body | string | O | | usable | boolean | O (default false) |

• facebook | key | type | snsData required | | ----------- | ------- | ------------- | | url | string | O | | width | number | X | | height | number | X | | usable | boolean | O (default false) |

속성 우선순위

onOpen Object.snsData > onOpen Object > defaultData.snsData > defaultData

상위에서 사용된 값을 그대로 사용하고 싶지 않을 경우 우선순위가 더 높은 하위에서 가공 ex. 전체적으로는 모든 공유 버튼을 사용하고 싶지만 특정 페이지에서만 kakao 버튼만 사용하고 싶을 경우 하위에서 가공

1. 각 페이지 social share Object snsData

   onOpen({
     snsData: {
       kakao: {
         kakaoId: "",
         title: "kakao test title",
         description: "test description",
         imageUrl: "",
         link: "https://test.com",
         btnTitle: "공유하기",
         btnLink: "https://test.com",
         usable: true,
       },
       line: {
         title: "line test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       naver: {
         title: "naver test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       twitter: {
         text: "twitter test title",
         url: "https://test.com",
         hashtags: "hashtag1, hashtags2",
         width: 0,
         height: 0,
         usable: true,
       },
       band: {
         message: "band test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       email: {
         addressee: "test1@gmail.com, test2@gmail.com",
         subject: "email test title",
         body: "https://test.com",
         usable: true,
       },
       facebook: {
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
     },
   });

2. 각 페이지 social share Object 최상위 key, value (url, title, description, imageUrl, width, height, usable)

   onOpen({
     width: 0,
     height: 0,
     imageUrl: "",
     usable: true,
   });

3. App.tsx defaultData snsData

   const defaultData = {
     snsData: {
       kakao: {
         kakaoId: "",
         title: "kakao test title",
         description: "test description",
         imageUrl: "",
         link: "https://test.com",
         btnTitle: "공유하기",
         btnLink: "https://test.com",
         usable: true,
       },
       line: {
         title: "line test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       naver: {
         title: "naver test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       twitter: {
         text: "twitter test title",
         url: "https://test.com",
         hashtags: "hashtag1, hashtags2",
         width: 0,
         height: 0,
         usable: true,
       },
       band: {
         message: "band test title",
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
       email: {
         addressee: "test1@gmail.com, test2@gmail.com",
         subject: "email test title",
         body: "https://test.com",
         usable: true,
       },
       facebook: {
         url: "https://test.com",
         width: 0,
         height: 0,
         usable: true,
       },
     },
   };

4. App.tsx defaultData 최상위 key, value (width, height, imageUrl, usable)

   const defaultData = {
     width: 0,
     height: 0,
     imageUrl: "",
     usable: true,
   };

주의할 점

• defaultData와 onOpen 함수 social share props data 형식이 다름
• url이 빈 값(’’)이거나 값을 넘겨주지 않았을 경우(undefined) 모든 버튼은 노출 안됨
• usable이 false이면 노출 안됨 (초기값은 false, 사용자가 노출시키고 싶은 sns에 usable true 설정 필요)
• width, height는 default 값 600, 600 (공유하기 창의 크기)
  • full-size로 공유하기 창을 띄우고 싶다면 width, height에 0을 넘겨주면 됨
  • width, height 속성은 window.open을 사용하는 공유하기 버튼(line, naver. twitter, band, facebook)에만 적용될 값
• useSnsShareDrawer hook onOpen 함수의 두 번째 props로 social share modal/drawer 배경 색상 유무 제어 가능
  • false : 투명 배경색
  • true (default) : 검은 반투명 배경색
• 각 페이지 onOpen 함수 props social share Object 최상위 title, description, url, imageUrl로 navigator.share() / clipboard 복사하기 기능 사용
  • social share Object 최상위 url이 없을 경우 navigator.share() 비노출, clipboard 복사하기 기능 동작 안함
• kakao, naver는 필수값 존재
  • kakao : kakaoId, title이 없을 경우 비노출
  • naver : title이 없을 경우 비노출
• 사용자가 설정한 social share data 우선순위에 따라 화면 노출이 달라짐
• 모든 값은 선택값이며, 상위(App.tsx)에서 사용된 값을 그대로 사용하고 싶지 않을 때 하위에서 가공