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.