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";functionApp(){return(<div><YouTubeEmbedurl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"/><XEmbedurl="https://x.com/elonmusk/status/123456789"theme="dark"/><SpotifyEmbedurl="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:

interfaceCommonProps{url: string;// Required: Content URLtheme?: "light"|"dark";// Color theme (default: "light")width?: string|number;// Container widthmaxWidth?: string|number;// Maximum widthshowBranding?: boolean;// Show platform branding (default: true)showCTA?: boolean;// Show call-to-action button (default: true)ctaLabel?: string;// CTA button textdisableCard?: boolean;// Remove card stylinglinkBehavior?: "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";<EmbedCardprovider="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";<MediaPlayersrc="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:

<YouTubeEmbedurl={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";<CardLayoutProviderlayout="modern"><YouTubeEmbedurl={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