관리 메뉴

CASSIE'S BLOG

react-share 라이브러리 본문

PROGRAMMING/React

react-share 라이브러리

ITSCASSIE1107 2023. 12. 11. 22:06

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

 

react-share

Social media share buttons and share counts for React.. Latest version: 5.0.3, last published: 12 days ago. Start using react-share in your project by running `npm i react-share`. There are 366 other projects in the npm registry using react-share.

www.npmjs.com

 

 

그냥 라이브러리 설치하고, 저렇게 사용하면 끝이다. 

 

import React from "react";

import {
    FacebookShareButton,
    FacebookIcon,
    FacebookMessengerShareButton,
    FacebookMessengerIcon,
    TwitterShareButton,
    TwitterIcon,
    LineShareButton,
    LineIcon,
} from "react-share";

// currentUrl을 적절한 URL로 정의
const currentUrl = "https://example.com";

const Share = () => {
    return (
        <>
            <FacebookShareButton style={{ marginRight: "20px" }} url={currentUrl}>
                <FacebookIcon size={48} round={true} borderRadius={24}></FacebookIcon>
            </FacebookShareButton>
            <FacebookMessengerShareButton style={{ marginRight: "20px" }} url={currentUrl}>
                <FacebookMessengerIcon size={48} round={true} borderRadius={24}></FacebookMessengerIcon>
            </FacebookMessengerShareButton>
            <TwitterShareButton style={{ marginRight: "20px" }} url={currentUrl}>
                <TwitterIcon size={48} round={true} borderRadius={24}></TwitterIcon>
            </TwitterShareButton>
            <LineShareButton url={currentUrl}>
                <LineIcon size={48} round={true} borderRadius={24}></LineIcon>
            </LineShareButton>
        </>
    );
}

export default Share;

반응형