【React.js】SNSで簡単にシェア出来る「react-share」を試してみる

はじめに

こんにちは、がんがんです。
Webサイトを作っていると、リンクの共有を行ってほしいなどのユースケースがあるかと思います。
SNSのアイコンを一から設定し、ボタンを実装していくのは非常に面倒ですよね。

そこで、今回はReact.jsで簡単にシェアボタンを実装することが出来るreact-shareについての実験を行いました。
今後の自分用に備忘録を残しておこうと思います。

目次

参考記事

qiita.com

www.npmjs.com

公式のデモはこちらです。
nygardk.github.io

実行結果

実験

インストール

#  yarnの場合
$ yarn add react-share
#  npmの場合
$ npm i --save react-share

動作実験

今回は参考記事をベースにしてダイアログ => シェアボタンという実装です。

環境

• Next.js
• Material-ui

コード

今回はシェアボタンの実験がしたかったのでStyle設定などはあまり考えずに行っています。
withStylesは非推奨だったと思うので、実際に使う場合はmakeStylesに変更していこうかと思います。

import React from 'react';
import {
  Button, Divider, Dialog, DialogActions, DialogContent,
  DialogTitle
} from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

//  SNS用シェアボタン
import {
  FacebookShareButton,
  TwitterShareButton,
  EmailShareButton,
  LineShareButton,

  FacebookIcon,
  TwitterIcon,
  EmailIcon,
  LineIcon
} from 'react-share';

const styles = theme => ({
  root: {
  },
  snsShareButtonArea: {
    padding: 10,
    display: 'flex',
    justifyContent: 'space-around'
  },
  snsShareButton: {
  },
});


class ShareDialog extends React.Component {
  render() {
    const { classes, theme } = this.props;

    //  シェアボタン用
    const shareUrl = "https://gangannikki.hatenadiary.jp/";
    const title = "Test Title";

    return (
      <Dialog
        open={this.props.open}
        onClose={() => this.props.onClose()}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-discription"
        className={classes.root}
      >
        <DialogTitle>Share!</DialogTitle>
        <Divider/>
        {/* SNSシェアボタン */}
        <DialogContent className={classes.snsShareButtonArea}>
          <FacebookShareButton
            url={shareUrl}
            quote={title}
            className={classes.snsShareButton}
          >
            <FacebookIcon
              size={48}
              round />
          </FacebookShareButton>
          <TwitterShareButton
            url={shareUrl}
            quote={title}
            className={classes.snsShareButton}
          >
            <TwitterIcon
              size={48}
              round />
          </TwitterShareButton>
          <LineShareButton
            url={shareUrl}
            quote={title}
            className={classes.snsShareButton}
          >
            <LineIcon
              size={48}
              round />
          </LineShareButton>
          <EmailShareButton
            url={shareUrl}
            subject={title}
            body="body"
            className={classes.snsShareButton}
          >
            <EmailIcon
              size={48}
              round />
          </EmailShareButton>
        </DialogContent>
      
        <Divider/>
        {/* 閉じるボタン */}
        <DialogActions>
          <Button onClick={() => this.props.onClose()} color="primary" autoFocus>
            閉じる
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

// export default ShareDialog;
export default withStyles(styles, { withTheme: true })(ShareDialog);

おわりに

今回はReactで簡単に実装することが出来るシェアボタンreact-shareについて実験を行いました。
シェア機能の実装は必要になることが多いので、今後も実験していろいろ使っていこうかと思います。