react-social-embeds

Unified React components for embedding social media and streaming content. One component per platform with consistent styling, theming, and TypeScript support.

▶️ Live Demo | 📦 npm | ⛓️‍💥 GitHub Repo

Follow me on 𝕏

Installation

npm install react-social-embeds

Peer Dependencies

npm install react react-dom
# Optional - for HLS/DASH video streaming:
npm install hls.js dashjs

Dependency	Version	Required
react	≥18	Yes
react-dom	≥18	Yes
hls.js	≥1.0	No (for HLS streams)
dashjs	≥4.0	No (for DASH streams)

Quick Start

import { YouTubeEmbed, XEmbed, SpotifyEmbed } from "react-social-embeds";

function App() {
  return (
    <div>
      <YouTubeEmbed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
      <XEmbed url="https://x.com/elonmusk/status/123456789" theme="dark" />
      <SpotifyEmbed url="https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC" />
    </div>
  );
}

Supported Platforms

Social Media

Component	Platform
XEmbed	X (Twitter)
InstagramEmbed	Instagram
FacebookEmbed	Facebook
ThreadsEmbed	Threads
BlueskyEmbed	Bluesky
MastodonEmbed	Mastodon
TruthSocialEmbed	Truth Social
LinkedInEmbed	LinkedIn
RedditEmbed	Reddit
TumblrEmbed	Tumblr
PinterestEmbed	Pinterest
TelegramEmbed	Telegram

Video

Component	Platform
YouTubeEmbed	YouTube
TikTokEmbed	TikTok
TwitchEmbed	Twitch
KickEmbed	Kick
RumbleEmbed	Rumble
DailymotionEmbed	Dailymotion
OdyseeEmbed	Odysee
BilibiliEmbed	Bilibili
ArchiveOrgEmbed	Archive.org

Audio

Component	Platform
SpotifyEmbed	Spotify
AppleMusicEmbed	Apple Music
ApplePodcastsEmbed	Apple Podcasts
SoundCloudEmbed	SoundCloud
DeezerEmbed	Deezer
TidalEmbed	Tidal

Common Props

All embed components share these common props:

interface CommonProps {
  url: string;                    // Required: Content URL
  theme?: "light" | "dark";       // Color theme (default: "light")
  width?: string | number;        // Container width
  maxWidth?: string | number;     // Maximum width
  showBranding?: boolean;         // Show platform branding (default: true)
  showCTA?: boolean;              // Show call-to-action button (default: true)
  ctaLabel?: string;              // CTA button text
  disableCard?: boolean;          // Remove card styling
  linkBehavior?: "card" | "title" | "cta" | "none";
  linkTarget?: "_blank" | "_self";
}

Core Components

EmbedCard

Base component used by all embeds. Use directly for custom embeds:

import { EmbedCard } from "react-social-embeds";

<EmbedCard
  provider="Custom"
  title="My Custom Embed"
  author="Author Name"
  body="Description text"
  href="https://example.com"
  theme="dark"
  media={{ type: "image", url: "https://example.com/image.jpg" }}
/>

MediaPlayer

Custom video player with HLS/DASH support:

import { MediaPlayer } from "react-social-embeds";

<MediaPlayer
  src="https://example.com/stream.m3u8"
  poster="https://example.com/poster.jpg"
  autoPlay={false}
/>

Supports:

• Native video (MP4, WebM)
• HLS streams (.m3u8) via hls.js
• DASH streams (.mpd) via dashjs

Theming

All components support light and dark themes:

<YouTubeEmbed url={videoUrl} theme="dark" />

Use CSS variables for custom styling:

.my-embed {
  --embed-accent: #ff6b6b;
  --embed-bg: #1a1a1a;
}

Layout Modes

Control layout with the CardLayoutProvider:

import { CardLayoutProvider, YouTubeEmbed } from "react-social-embeds";

<CardLayoutProvider layout="modern">
  <YouTubeEmbed url={url} />
</CardLayoutProvider>

Layouts: "classic" (metadata first) | "modern" (media first)

TypeScript

All components export their prop types:

import { YouTubeEmbed, YouTubeEmbedProps } from "react-social-embeds";
import { EmbedCardProps, MediaPlayerProps } from "react-social-embeds";

License

MIT