【React】「react-social-media-embed」を用いてSNSの投稿を埋め込む

概要

SNSの投稿を埋め込む際、各SNSでは埋め込み用のコードが用意されていますが、それをReactに埋め込む際にscriptを走らせる必要があったり、scriptどうしが干渉することなどもあって、適切に実装しようとすると中々大変です。
何か良いライブラリは等ないかなと思って探してみたところ、justinmahar/react-social-media-embedというのが使えそうだったので紹介します。

前提

• 使用したreact-social-media-embedのバージョンは2.5.18です。

ライブラリの概要

InstagramやXなど複数のSNSに対応していて、各SNSごとにコンポーネントが用意されています。各コンポーネントには属性としてurlが用意されているので、そこに該当の投稿のurlを設定します。

実装サンプル

Instagramのコードを埋め込む実装は、以下のような感じとなります。

import React, { FC } from "react";
import { InstagramEmbed } from "react-social-media-embed";

type Props = {
  url: string;
};

export const InstagramComponent: FC<Props> = ({ url }) => {
  return (
    <div>
      <InstagramEmbed url={url} width={320} />
    </div>
  );
};