안녕하세요!저는 미아케라고 합니다.
이번엔 리액트의 구성 요소 라이브러리'차크라 UI'를 이용해 다음 페이스북, 트위터의 공유 버튼을 만들자!

참고로 표준react-share는 원형 버튼만 있습니다.

이런 느낌.예전에 웹사이트에서 많이 쓰던 직사각형 디자인 버튼을 만들어서 공유하고 싶어서 이번에 집필했어요!
그럼 빨리 하자!

필요한 패키지 설치

ChakraUI 가져오기 절차가 생략되었으므로 아직 설치되지 않은 경우 여기. 를 참고하여 가져오십시오!

[react-share 설치]

npm 저기!

npm i react-share

yarn 저기!

yarn add react-share

[react-icons 설치]

npm 저기!

npm i react-icons --save

yarn 저기!

yarn add react-icons

실제로 버튼 눌러주세요!

설치가 끝난 후 파일을 만들고 불러내서 스타일링을 하세요!

Twitter 공유 버튼

import React from 'react'
import { Box } from '@chakra-ui/layout'
import { TwitterShareButton } from 'react-share'
import { FaTwitter } from 'react-icons/fa'

type Props = {
  url: string
}

export const TwitterShareBtn: React.VFC<Props> = ({ url }) => {
  return (
    <TwitterShareButton
      url={url}
      style={{
        display: 'flex',
        padding: '0 12px',
        height: 18,
        background: '#359BF0',
        borderRadius: 10
      }}
    >
      <Box p={0.8}>
        <FaTwitter color={'white'} />
      </Box>
      <Box as="span" ml={2} fontSize={12} textColor={'white'} p={0.8}>
        ツイート
      </Box>
    </TwitterShareButton>
  )
}

FaceBook 공유 버튼

import React from 'react'
import { Box } from '@chakra-ui/layout'
import { FacebookShareButton } from 'react-share'
import { FaFacebook } from 'react-icons/fa'

type Props = {
  url: string
}

export const FaceBookShareBtn: React.VFC<Props> = ({ url }) => {
  return (
    <FacebookShareButton
      url={url}
      style={{
        display: 'flex',
        padding: '0 12px',
        height: 18,
        background: '#1877f2',
        borderRadius: 4
      }}
    >
      <Box p={0.5}>
        <FaFacebook color={'white'} size={14} />
      </Box>
      <Box as="span" ml={2} fontSize={12} textColor={'white'} p={0.8}>
        シェア
      </Box>
    </FacebookShareButton>
  )
}

두 개의 버튼이 부착된 코드, 공통점은
・"react-share"버튼을 호출하여 차크라 UI의 박스 라벨로 스타일링합니다.<div> 라벨과 같은 식별이 가능할 것 같아요!)
・"react-icons"에서 SNS 아이콘을 호출하여 사이즈, 색상을 변경합니다.
바로!
ChakraUI는 구성 요소의 props 값에 스타일 속성을 직접 쓰면 직관적으로 디자인할 수 있어 기쁩니다!
※ 타입 스크립트를 가져오지 않은 사람은 type Proops를 생략할 수 있습니다~👍

총결산

아이콘 잘 됐나요?
달리기지만 이번엔 차크라 UI× react-share를 통해 공유 버튼 제작을 소개했습니다!괜찮다면 *LGTM을 얻었으면 좋겠어요!
Happy Hacking!!!!