React Universal Embed

A lightweight and self-contained React component for embedding various external platforms such as YouTube, Spotify, SoundCloud, Twitter (X), Facebook, Twitch, and GIFs. Designed to provide a consistent, adaptive look without external dependencies or unnecessary complexity.

Features

• Automatically detects and embeds links from supported platforms.
• Adapts colors to your page’s theme for visual consistency.
• Minimal setup — just import and use.
• Supports graceful fallbacks for unknown links.

Supported Platforms

• YouTube
• Spotify (track, playlist, album, show, episode)
• SoundCloud
• Twitter / X
• Facebook
• Twitch (videos, channels)
• GIFs (direct links or Giphy)
• Generic URLs (rendered as simple link previews)

Installation

npm install react-embed-component

Usage

import { Embed } from "react-embed-component";

export default function Example() {
  return (
    <Embed
      url="https://www.youtube.com/watch?v=LtZxTqd4Jms"
      width="100%"
      autoAdaptColors
    />
  );
}

Props

Prop	Type	Default	Description
url	string	—	Target URL to embed.
width	string | number	"100%"	Width of the embed.
height	string | number	"auto"	Height of the embed.
autoAdaptColors	boolean	true	Automatically adjusts colors to page background.
className	string	""	Additional CSS class for styling.
onLoad	() => void	—	Callback when the embed finishes loading.
onError	(error: Error) => void	—	Callback for load errors.

Resource and Platform Notes

This component embeds content directly from external services using their public embed endpoints. Because of that:

• Each service controls its own resource limits and behavior.
• Certain embeds may require users to be logged in, depending on platform settings.
• Rate limits or network restrictions are outside the component’s control.

Project Scope and Limitations

This package focuses on being simple and sufficient for most embedding needs — not on replicating every niche integration or workaround for third-party APIs. If you need support for more platforms or advanced customization, you’re very welcome to extend it yourself: the source code is clean and intentionally straightforward.

In short — it works, it’s efficient, and it covers what I actually use. If you need more — open the repo and make it happen.

Development

git clone https://github.com/soskfishson/react-embed-component
cd react-embed-component
npm install
npm run build

License

MIT License. Do whatever you like with it — responsibly.