SNSシェアボタンを簡単実装！react-shareの使い方を解説

今回はReactを使って、簡単にソーシャルシェアボタンが実装できる便利なライブラリ「react-share」を紹介します！

react-shareって何？

react-shareは、SNSへのシェア機能を手軽に実装できるReact用のライブラリです。X（旧Twitter）やFacebook、LINEなど、よく使われるサービスへの共有ボタンが簡単に設置できます。

インストール方法

まずはnpmかyarnでreact-shareをインストールしましょう。

npm install react-share

# またはyarnの場合
yarn add react-share

シェアボタンの基本的な使い方

実装例はこんな感じ。

import { TwitterShareButton, TwitterIcon } from 'react-share';

const ShareComponent = () => (
  <div>
    <TwitterShareButton url="https://example.com" title="見てみて！">
      <TwitterIcon size={32} round />
    </TwitterShareButton>
  </div>
);

export default ShareComponent;

このコードだけで、X（旧Twitter）にページをシェアできるボタンが完成！めちゃくちゃ簡単ですよね。

対応している主なシェアボタン

react-shareは、多くのSNSに対応しています。例えば...

• TwitterShareButton

• FacebookShareButton

• LineShareButton

• PinterestShareButton

• LinkedinShareButton

その他にも多くのボタンが利用できます。対応しているすべてのボタンは、開発元のGitHubページをチェックしてみてくださいね。

アイコンもそれぞれのSNS向けに用意されているので、見た目の調整もほぼ不要です。

ちょっとしたカスタマイズ

サイズや形状は簡単に変更可能です。

<TwitterIcon size={48} round={false} />

sizeで大きさを調整でき、roundをfalseにすると四角く表示されます。自分のサイトに合ったデザインに調整しましょう。

まとめ

react-shareは、SNSシェアボタンをサクッと実装したい時に大活躍のライブラリです。わざわざSNSごとのAPIを調べたりする手間もありません。