Chakra UI × react-shareでシェアボタンを作る

こんにちは！ミヤケイと申します。

今回はReactのコンポーネントライブラリである「Chakra UI」を用いて以下のようなFaceBook、Twitterのシェアボタンを作成していきます！

ちなみに標準のreact-shareだと丸いボタンのみ用意されています。

こんな感じ。サイトでよく使われているような長方形デザインのボタンを以前作成したため、共有したいと思い今回執筆に至りました！

では早速作っていきましょう！

必要なパッケージをインストールする

Chakra UIの導入手順は省いているため、もしまだインストールされていない場合はこちらを参考に導入していただけたらと思います！

【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>
  )
}

2つのボタンのコードを添付しましたが共通して言えることは
・「react-share」のボタンを呼び出してChakra UIのBoxタグでスタイリングする。
(<div>タグと同じ認識でいいかと思います！)

・「react-icons」からSNSのアイコンを呼び出してサイズ、色を変更する。
です！

Chakra UIはコンポーネントのpropsの値に直接style属性を書くだけで直感的にデザインが出来るため楽しいですね！

※TypeScriptを導入していない方はtype Props〜は省略して結構です👍

まとめ

無事にアイコンは作成出来ましたでしょうか？
駆け足にはなりましたが今回はChakra UI × react-shareでシェアボタンの作成を紹介しました！もしいいなと思ったら*LGTMいただけると励みになります！

Happy Hacking!!!!