【React】SNSシェアボタンを簡単に実装できるライブラリ「react-share」

まだ実際に使ってはいないのですが、現在開発を行っている Cordova アプリにSNSシェア機能を実装する予定なので、備忘録としてまとめ。
「react-share」という、SNSシェア機能を簡単に実装できるライブラリです。

GitHub のページはこちら。

GitHub – nygardk/react-share: Social media share buttons and share counts for React
https://github.com/nygardk/react-share

デモページへのリンクもありますので、一度触ってみてから導入を検討されることをお勧めします。

導入手順ですが、まず下記のコマンドでライブラリをインストールします。

npm install react-share --save

インストールが完了したら、あとはシェア機能を実装したいページでインポートします。
サンプルコードでは、Facebook と Twitter のシェアボタンとアイコンをインポートしています。

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

なお、各 SNS のアイコンをインポートすることをお忘れなく。
あとは、render() 内で、各 SNS ボタンを追加するだけです。

<FacebookShareButton url={["シェアしたいURL"]} quote={["シェア時に一緒に投稿したいテキスト"]}>
    <FacebookIcon size={32} round />
</FacebookShareButton>
<TwitterShareButton url={["シェアしたいURL"]} title={["シェア時に一緒に投稿したいタイトル"]}>
    <TwitterIcon size={32} round />
</TwitterShareButton>

どのシェアボタンにも共通している必須項目は url で、こちらにシェアしたい記事の URL を指定します。
Facebook ボタンの場合は、quote という項目があり、こちらにシェア時に一緒に投稿したいテキスト（引用文）を指定できます。
Twitter ボタンの場合は、title という項目があり、こちらにシェア時に一緒に投稿したいタイトルを指定できます。
他にも、ハッシュタグを指定する項目なんかがあるボタンもありました。
詳しくは、GitHub のページに一覧が記載されていますので、そちらを参考にしてください。
説明だけだと、何かよくわからない項目もあったりしたので、そのへんは実際に触ってみたいと思います。

また、ボタンの見た目については、上記のサンプルではアイコンに round が指定されているので円形のボタンになっていますが、指定によっては四角いボタンや、角丸の見た目にすることもできるようです。
まん丸ボタンが可愛いので、個人的にはこのままでもいいかなと思っています。

以上、React で SNS シェアボタンを簡単に実装できるライブラリ「react-share」のご紹介でした。
ご参考になれば幸いです。