react-share 소셜 미디어 공유 버튼 라이브러리

react-share 소셜 미디어 공유 버튼 라이브러리

 

react-share는 React 애플리케이션에서 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 도와주는 인기 있는 오픈 소스 라이브러리다. 트위터, 페이스북, 카카오톡, 텔레그램 등 다양한 플랫폼에 맞는 공유 버튼을 제공하며, 각 플랫폼의 URL 스킴을 자동으로 처리해줘서 매우 간편하게 사용할 수 있다.

---

주요 특징

• 다양한 소셜 플랫폼 지원: Facebook, Twitter, Telegram, WhatsApp, Reddit, LinkedIn 등
• 아이콘 포함 버튼 제공
• 커스터마이징 가능 (아이콘 크기, 스타일 등)
• TypeScript 지원

---

설치 방법

npm install react-share

또는

yarn add react-share

 

기본 사용법 예시

예를 들어 페이스북과 트위터 공유 버튼을 추가한다고 할 때:

import React from "react";
import {
  FacebookShareButton,
  TwitterShareButton,
  FacebookIcon,
  TwitterIcon
} from "react-share";

const ShareExample = () => {
  const shareUrl = "https://example.com";
  const title = "이건 정말 멋진 링크야!";

  return (
    <div>
      <FacebookShareButton url={shareUrl} quote={title}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>

      <TwitterShareButton url={shareUrl} title={title}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>
    </div>
  );
};

export default ShareExample;

각 플랫폼 별 주요 Props 요약

플랫폼	컴포넌트 이름	주요 Props
Facebook	FacebookShareButton	url, quote, hashtag
Twitter	TwitterShareButton	url, title, via, hashtags
Telegram	TelegramShareButton	url, title
LinkedIn	LinkedinShareButton	url, title, summary, source
Kakao (지원 안됨❗️)	직접 SDK 사용해야 함

FacebookIcon, TwitterIcon 같은 아이콘 컴포넌트는 size, round, borderRadius 등으로 스타일 조정 가능

 

커스터마이징 팁

<FacebookIcon size={40} round={false} borderRadius={8} />

이렇게 하면 아이콘의 모양과 크기를 조절할 수 있다.

 

https://www.npmjs.com/package/react-share

react-share