react-shareでSNSシェアボタンを作る
Next.jsアプリにSNSシェアボタンを追加する際に、react-shareを使うと手軽に導入できた。
↓のようなShareボタン用のコンポーネントを作り、呼び出し元からシェア文言とURLを渡すようにすればOK.
// components/Share.tsx
import React from 'react'
import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton } from 'react-share'
type Props = {
text: string
url: string
}
export const Share = ({ text, url }: Props) => {
return (
<ul className="flex justify-center list-none">
<li className="mr-8">
<TwitterShareButton url={url} title={text}>
<TwitterIcon size={32} round={true} />
</TwitterShareButton>
</li>
<li>
<FacebookShareButton url={url}>
<FacebookIcon size={32} round={true} />
</FacebookShareButton>
</li>
</ul>
)
}
今回はTwitter, Facebookのサンプルにしたが、react-shareはLINEやHatenaブックマークなど様々なSNSに対応している。