SNSシェアボタンの設置2（react-share）

2019/08/11

やりたいこと

SNSシェアボタン群のコードを、ひとまとめにしたコンポーネントにする。

SNSシェアボタンの設置 1（react-share）
[SNSシェアボタンの設置 2（react-share）← いまココ
SNSシェアボタンの設置3（はてブボタン）

やること

ShareButtons.js というコンポーネントを作成
作成したShareButtons.jsを使うように置き換える

1. ShareButtons.js というコンポーネントを作成

(1) src/Components/Post/ShareButtons/ ディレクトリを作成
(2) ShareButtons/ 配下に、以下のファイルを作成

index.js
ShareButtons.js
ShareButton.module.scss

実装

index.js

// @flow
export { default } from './ShareButtons';

ShareButtons.js

import React from 'react';
import styles from './ShareButtons.module.scss';

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


type Props = {
    shareTitle: string,
    articleUrl: string
};

const ShareButtons = ({ shareTitle, shareUrl }: Props) => (
    <div className={styles['sharebuttons']}>
    <TwitterShareButton　className={styles['sharebuttons__twitter']} title={shareTitle + "\n"} via="kiotera_tech" url={shareUrl}>
        <TwitterIcon size={32} round />
    </TwitterShareButton>
    <FacebookShareButton className={styles['sharebuttons__facebook']} url={shareUrl} quote={shareTitle}>
        <FacebookIcon size={32} round />
    </FacebookShareButton>
    <EmailShareButton className={styles['sharebuttons__email']} subject={shareTitle} body={shareUrl}>
        <EmailIcon size={32} round />
    </EmailShareButton>
    </div>
);
export default ShareButtons;

ShareButtons.module.scss

@import '../../../assets/scss/variables';
@import '../../../assets/scss/mixins';


.sharebuttons {
    &__twitter,
    &__facebook,
    &__email
    {
        display: inline-block;
        margin-right: 10px;
    }

}

2. 作成したShareButtons.jsを使うように置き換える

Post.js

<ShareButtons shareTitle={title} shareUrl={url + slug}></ShareButtons>

※Post.jsと、Post.module.scssに書いていた不要になったコードも適宜削除。

書き換え後に、見た目と挙動が変わらないことを確認して完了。

やってみて

リファクタ的なことが好きな性分なので、やってて楽しい。
コンポーネント化したことで、今後、SNSボタンを追加するときに、Post.jsではなく、ShareButtons.jsを触れば良いので、わかりやすいし、影響範囲が少なくなるのでよい。