Skip to content

Commit 9b89e90

Browse files
zzyilzzyil
committed
Initial public release
0 parents  commit 9b89e90

115 files changed

Lines changed: 46947 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/deploy-demo.yml‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: Deploy Demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main, master]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: "pages"
15+
cancel-in-progress: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: "20"
28+
cache: "npm"
29+
cache-dependency-path: demo/package-lock.json
30+
31+
- name: Setup Pages
32+
uses: actions/configure-pages@v4
33+
34+
- name: Install root dependencies
35+
run: npm ci
36+
37+
- name: Install demo dependencies
38+
run: npm ci
39+
working-directory: demo
40+
41+
- name: Build demo
42+
run: npm run export
43+
working-directory: demo
44+
env:
45+
GITHUB_PAGES: "true"
46+
REPO_NAME: ${{ github.event.repository.name }}
47+
48+
- name: Upload artifact
49+
uses: actions/upload-pages-artifact@v3
50+
with:
51+
path: demo/out
52+
53+
deploy:
54+
environment:
55+
name: github-pages
56+
url: ${{ steps.deployment.outputs.page_url }}
57+
runs-on: ubuntu-latest
58+
needs: build
59+
steps:
60+
- name: Deploy to GitHub Pages
61+
id: deployment
62+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.next
3+
demo/certificates/localhost-key.pem
4+
demo/certificates/localhost.pem
5+
private

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024-2026
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# react-embeds
2+
3+
Unified React components for embedding social media and streaming content. One component per platform with consistent styling, theming, and TypeScript support.
4+
5+
## Installation
6+
7+
```bash
8+
npm install react-embeds
9+
```
10+
11+
### Peer Dependencies
12+
13+
```bash
14+
npm install react react-dom
15+
# Optional - for HLS/DASH video streaming:
16+
npm install hls.js dashjs
17+
```
18+
19+
| Dependency | Version | Required |
20+
|------------|---------|----------|
21+
| react | ≥18 | Yes |
22+
| react-dom | ≥18 | Yes |
23+
| hls.js | ≥1.0 | No (for HLS streams) |
24+
| dashjs | ≥4.0 | No (for DASH streams) |
25+
26+
## Quick Start
27+
28+
```tsx
29+
import { YouTubeEmbed, XEmbed, SpotifyEmbed } from "react-embeds";
30+
31+
function App() {
32+
return (
33+
<div>
34+
<YouTubeEmbed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
35+
<XEmbed url="https://x.com/elonmusk/status/123456789" theme="dark" />
36+
<SpotifyEmbed url="https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC" />
37+
</div>
38+
);
39+
}
40+
```
41+
42+
## Supported Platforms
43+
44+
### Social Media
45+
| Component | Platform |
46+
|-----------|----------|
47+
| `XEmbed` | X (Twitter) |
48+
| `InstagramEmbed` | Instagram |
49+
| `FacebookEmbed` | Facebook |
50+
| `ThreadsEmbed` | Threads |
51+
| `BlueskyEmbed` | Bluesky |
52+
| `MastodonEmbed` | Mastodon |
53+
| `TruthSocialEmbed` | Truth Social |
54+
| `LinkedInEmbed` | LinkedIn |
55+
| `RedditEmbed` | Reddit |
56+
| `TumblrEmbed` | Tumblr |
57+
| `PinterestEmbed` | Pinterest |
58+
| `SnapchatEmbed` | Snapchat |
59+
| `TelegramEmbed` | Telegram |
60+
61+
### Video
62+
| Component | Platform |
63+
|-----------|----------|
64+
| `YouTubeEmbed` | YouTube |
65+
| `TikTokEmbed` | TikTok |
66+
| `TwitchEmbed` | Twitch |
67+
| `KickEmbed` | Kick |
68+
| `RumbleEmbed` | Rumble |
69+
| `DailymotionEmbed` | Dailymotion |
70+
| `OdyseeEmbed` | Odysee |
71+
| `BilibiliEmbed` | Bilibili |
72+
| `ArchiveOrgEmbed` | Archive.org |
73+
74+
### Audio
75+
| Component | Platform |
76+
|-----------|----------|
77+
| `SpotifyEmbed` | Spotify |
78+
| `AppleMusicEmbed` | Apple Music |
79+
| `ApplePodcastsEmbed` | Apple Podcasts |
80+
| `SoundCloudEmbed` | SoundCloud |
81+
| `DeezerEmbed` | Deezer |
82+
| `TidalEmbed` | Tidal |
83+
84+
## Common Props
85+
86+
All embed components share these common props:
87+
88+
```tsx
89+
interface CommonProps {
90+
url: string; // Required: Content URL
91+
theme?: "light" | "dark"; // Color theme (default: "light")
92+
width?: string | number; // Container width
93+
maxWidth?: string | number; // Maximum width
94+
showBranding?: boolean; // Show platform branding (default: true)
95+
showCTA?: boolean; // Show call-to-action button (default: true)
96+
ctaLabel?: string; // CTA button text
97+
disableCard?: boolean; // Remove card styling
98+
linkBehavior?: "card" | "title" | "cta" | "none";
99+
linkTarget?: "_blank" | "_self";
100+
}
101+
```
102+
103+
## Core Components
104+
105+
### EmbedCard
106+
107+
Base component used by all embeds. Use directly for custom embeds:
108+
109+
```tsx
110+
import { EmbedCard } from "react-embeds";
111+
112+
<EmbedCard
113+
provider="Custom"
114+
title="My Custom Embed"
115+
author="Author Name"
116+
body="Description text"
117+
href="https://example.com"
118+
theme="dark"
119+
media={{ type: "image", url: "https://example.com/image.jpg" }}
120+
/>
121+
```
122+
123+
### MediaPlayer
124+
125+
Custom video player with HLS/DASH support:
126+
127+
```tsx
128+
import { MediaPlayer } from "react-embeds";
129+
130+
<MediaPlayer
131+
src="https://example.com/stream.m3u8"
132+
poster="https://example.com/poster.jpg"
133+
autoPlay={false}
134+
/>
135+
```
136+
137+
Supports:
138+
- Native video (MP4, WebM)
139+
- HLS streams (.m3u8) via hls.js
140+
- DASH streams (.mpd) via dashjs
141+
142+
## Theming
143+
144+
All components support light and dark themes:
145+
146+
```tsx
147+
<YouTubeEmbed url={videoUrl} theme="dark" />
148+
```
149+
150+
Use CSS variables for custom styling:
151+
152+
```css
153+
.my-embed {
154+
--embed-accent: #ff6b6b;
155+
--embed-bg: #1a1a1a;
156+
}
157+
```
158+
159+
## Layout Modes
160+
161+
Control layout with the `CardLayoutProvider`:
162+
163+
```tsx
164+
import { CardLayoutProvider, YouTubeEmbed } from "react-embeds";
165+
166+
<CardLayoutProvider layout="modern">
167+
<YouTubeEmbed url={url} />
168+
</CardLayoutProvider>
169+
```
170+
171+
Layouts: `"classic"` (metadata first) | `"modern"` (media first)
172+
173+
## TypeScript
174+
175+
All components export their prop types:
176+
177+
```tsx
178+
import { YouTubeEmbed, YouTubeEmbedProps } from "react-embeds";
179+
import { EmbedCardProps, MediaPlayerProps } from "react-embeds";
180+
```
181+
182+
## License
183+
184+
MIT

0 commit comments

Comments
 (0)