[React] 簡単にできるシェアボタンサンプルコード付き

2022-04-242022-07-22

サイトを作るときにシェアボタンを付けたいけど、やったことがないとちょっと手が伸びないことが多いです。

Reactでやってみたら、かなり簡単にできてしまうライブラリがあったので、紹介です。
まずはどうすれば実装できるか、の話。

Contents

1. react-share をインストール
2. サンプルコード
3. どんなシェアボタンがある？
4. react-share の公式

react-share をインストール

npm i react-share

サンプルコード

シェアボタンでよく使いそうな4種類（Facebook、Hatena、Line、Twitter）で実装してみたコードです。

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

const URL = 'https://example.com/';
const QUOTE = '共有するときのメッセージ';

const ShareButton = (props) => {
  return (
    <>
      <FacebookShareButton url={URL} quote={QUOTE}>
        <FacebookIcon size={24} round />
      </FacebookShareButton>
      <TwitterShareButton url={URL} title={QUOTE}>
        <TwitterIcon size={24} round />
      </TwitterShareButton>
      <LineShareButton url={URL} title={QUOTE} >
        <LineIcon size={24} round />
      </LineShareButton>
      <HatenaShareButton
        url={URL}
        title={QUOTE}
        windowWidth={660}
        windowHeight={460}
      >
        <HatenaIcon size={24} round />
      </HatenaShareButton>
    </>
  )
}

これだけなので、一度やってしまえばほぼコピペで使いまわしできるので便利です (/・ω・)/