[React.js] React Share 라이브러리

React Share 라이브러리

들어가며

• React Share 라이브러리에 대해 정리해본다.

 

React Share

개념

• 리액트 애플리케이션에서 다양한 소셜 미디어 공유 버튼을 쉽게 추가할 수 있도록 해주는 라이브러리
• 여러 소셜 미디어 플랫폼에 링크를 공유할 수 있는 버튼을 제공하며, 간단한 설정을 통해 버튼을 커스터마이징할 수 있다.

 

주요 특징

• 간단하게 설치할 수 있다.
• 필요한 소셜 미디어 공유 버튼을 컴포넌트로 불러와 사용할 수 있다.
• 버튼의 크기, 모양, 스타일을 쉽게 커스터마이징할 수 있으며, SVG 아이콘을 사용하여 스타일을 자유롭게 변경할 수 있다.
• 다양한 소셜 미디어 플랫폼을 지원한다.
  • Facebook, X(Twitter), LinkedIn, Pinterest, Telegram, WhatsApp, Line, Reddit 등

 

설치

$ npm intsall react-share    # yarn add react-share

 

예제 코드

'use client';

import { LuShare2 } from 'react-icons/lu';
import {
  TwitterShareButton,
  EmailShareButton,
  LinkedinShareButton,
  TwitterIcon,
  EmailIcon,
  LinkedinIcon,
} from 'react-share';

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { Button } from '../ui/button';

const ShareButton = ({
  productId,
  name,
}: {
  productId: string;
  name: string;
}) => {
  const url = process.env.NEXT_PUBLIC_WEBSITE_URL;
  const shareLink = `${url}/products/${productId}`;

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant='outline' size='icon' className='p-2'>
          <LuShare2 />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        side='top'
        align='end'
        sideOffset={10}
        className='flex items-center gap-x-2 justify-center w-full'
      >
        <TwitterShareButton url={shareLink} title={name}>
          <TwitterIcon size={32} round />
        </TwitterShareButton>
        <LinkedinShareButton url={shareLink} title={name}>
          <LinkedinIcon size={32} round />
        </LinkedinShareButton>
        <EmailShareButton url={shareLink} title={name}>
          <EmailIcon size={32} round />
        </EmailShareButton>
      </PopoverContent>
    </Popover>
  );
};

export default ShareButton;

 

react-share 라이브러리를 사용한 모습

 

참고 사이트

react-share