일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 요척합의
- 미니마카
- MERN스택
- 우레탄지퍼
- 슈퍼코딩
- 클린코드
- WHATTIMEOFTHEDAY
- 핸드캐리쿠리어차이점
- 엑셀필터복사붙여넣기
- 고급영어단어
- 자켓실측
- AATCC
- 헤이큐
- 40HQ컨테이너40GP컨테이너차이
- 지연환가료
- 엑셀자동서식
- Armhole Drop
- 필터링후복사붙여넣기
- 40HQ컨테이너
- 봉제용어
- 영어시간읽기
- 와끼
- 비슬론지퍼
- 비리짐
- 엑셀드래그단축키
- TACKING
- 나일론지퍼
- 암홀트롭
- 웹API
- 미국영어연음
- Today
- Total
CASSIE'S BLOG
react-share 라이브러리 본문
https://www.npmjs.com/package/react-share/v/4.4.1
그냥 라이브러리 설치하고, 저렇게 사용하면 끝이다.
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;
'PROGRAMMING > React' 카테고리의 다른 글
map함수의 각각의 배열 요소를 뜻하는 element (1) | 2023.12.12 |
---|---|
JSX FRAGMENT (0) | 2023.12.11 |
Toast (알림 컴포넌트) (0) | 2023.11.28 |
Express (Node.js 환경에서의 웹 개발을 효율적으로 만들어주는 도구) (1) | 2023.11.25 |
Error Boundary (0) | 2023.11.20 |