react-social-embeds 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +12 -8
  2. package/dist/index.d.mts +1 -30
  3. package/dist/index.d.ts +1 -30
  4. package/dist/index.js +63 -293
  5. package/dist/index.mjs +39 -268
  6. package/package.json +2 -2
package/README.md CHANGED
@@ -1,7 +1,12 @@
1
- # react-embeds
1
+ # react-social-embeds
2
+
3
+ [![npm version](https://img.shields.io/npm/v/react-social-embeds.svg)](https://www.npmjs.com/package/react-social-embeds)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
2
5
 
3
6
  Unified React components for embedding social media and streaming content. One component per platform with consistent styling, theming, and TypeScript support.
4
7
 
8
+ **[📺 Live Demo](https://zzyil.github.io/react-embeds/)** | **[📦 npm](https://www.npmjs.com/package/react-social-embeds)**
9
+
5
10
  ## Installation
6
11
 
7
12
  ```bash
@@ -26,7 +31,7 @@ npm install hls.js dashjs
26
31
  ## Quick Start
27
32
 
28
33
  ```tsx
29
- import { YouTubeEmbed, XEmbed, SpotifyEmbed } from "react-embeds";
34
+ import { YouTubeEmbed, XEmbed, SpotifyEmbed } from "react-social-embeds";
30
35
 
31
36
  function App() {
32
37
  return (
@@ -55,7 +60,6 @@ function App() {
55
60
  | `RedditEmbed` | Reddit |
56
61
  | `TumblrEmbed` | Tumblr |
57
62
  | `PinterestEmbed` | Pinterest |
58
- | `SnapchatEmbed` | Snapchat |
59
63
  | `TelegramEmbed` | Telegram |
60
64
 
61
65
  ### Video
@@ -107,7 +111,7 @@ interface CommonProps {
107
111
  Base component used by all embeds. Use directly for custom embeds:
108
112
 
109
113
  ```tsx
110
- import { EmbedCard } from "react-embeds";
114
+ import { EmbedCard } from "react-social-embeds";
111
115
 
112
116
  <EmbedCard
113
117
  provider="Custom"
@@ -125,7 +129,7 @@ import { EmbedCard } from "react-embeds";
125
129
  Custom video player with HLS/DASH support:
126
130
 
127
131
  ```tsx
128
- import { MediaPlayer } from "react-embeds";
132
+ import { MediaPlayer } from "react-social-embeds";
129
133
 
130
134
  <MediaPlayer
131
135
  src="https://example.com/stream.m3u8"
@@ -161,7 +165,7 @@ Use CSS variables for custom styling:
161
165
  Control layout with the `CardLayoutProvider`:
162
166
 
163
167
  ```tsx
164
- import { CardLayoutProvider, YouTubeEmbed } from "react-embeds";
168
+ import { CardLayoutProvider, YouTubeEmbed } from "react-social-embeds";
165
169
 
166
170
  <CardLayoutProvider layout="modern">
167
171
  <YouTubeEmbed url={url} />
@@ -175,8 +179,8 @@ Layouts: `"classic"` (metadata first) | `"modern"` (media first)
175
179
  All components export their prop types:
176
180
 
177
181
  ```tsx
178
- import { YouTubeEmbed, YouTubeEmbedProps } from "react-embeds";
179
- import { EmbedCardProps, MediaPlayerProps } from "react-embeds";
182
+ import { YouTubeEmbed, YouTubeEmbedProps } from "react-social-embeds";
183
+ import { EmbedCardProps, MediaPlayerProps } from "react-social-embeds";
180
184
  ```
181
185
 
182
186
  ## License
package/dist/index.d.mts CHANGED
@@ -282,10 +282,6 @@ declare const PLATFORM_ICON_PATHS: {
282
282
  readonly viewBox: "0 0 24 24";
283
283
  readonly path: "M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z";
284
284
  };
285
- readonly snapchat: {
286
- readonly viewBox: "0 0 24 24";
287
- readonly path: "M12 0C8.74 0 6.06 2.67 6.06 5.96c0 1.6.63 3.26 1.78 4.55.16.18.26.35.25.46-.03.27-.62 1.15-1.25 1.45-.39.19-.94.36-1.52.54-.37.11-.75.22-1.11.35-.6.22-.7.6-.67.88.07.66.92.99 2.49 1.31.6.12 1.27.25 1.38.35.1.62.3 1.29.61 1.89.6 1.2 1.9 1.9 3.87 1.9s3.28-.7 3.88-1.9c.31-.6.5-1.27.6-1.89.11-.1.79-.23 1.39-.35 1.56-.32 2.41-.65 2.49-1.31.03-.28-.07-.66-.67-.88-.36-.13-.74-.24-1.11-.35-.58-.18-1.13-.35-1.52-.54-.63-.3-1.22-1.18-1.25-1.45-.01-.11.09-.28.25-.46 1.15-1.29 1.78-2.95 1.78-4.55C17.94 2.67 15.26 0 12 0z";
288
- };
289
285
  };
290
286
  type PlatformIconName = keyof typeof PLATFORM_ICON_PATHS;
291
287
  type PlatformIconProps = React.SVGProps<SVGSVGElement> & {
@@ -1080,31 +1076,6 @@ interface PinterestEmbedProps {
1080
1076
  }
1081
1077
  declare const PinterestEmbed: React.FC<PinterestEmbedProps>;
1082
1078
 
1083
- interface SnapchatEmbedProps {
1084
- url: string;
1085
- width?: string | number;
1086
- maxWidth?: string | number;
1087
- height?: string | number;
1088
- className?: string;
1089
- style?: React.CSSProperties;
1090
- /** Whether to include script tag (default: true). Set false if loading globally. */
1091
- scriptLoad?: boolean;
1092
- disableCard?: boolean;
1093
- showCTA?: boolean;
1094
- ctaLabel?: string;
1095
- ctaLabelIcon?: boolean;
1096
- ctaLabelIconPosition?: "before" | "after";
1097
- ctaUsePlatformColor?: boolean;
1098
- ctaUsePlatformIconColor?: boolean;
1099
- ctaAlignment?: "left" | "center" | "right";
1100
- embedAlignment?: "left" | "center" | "right";
1101
- showBranding?: boolean;
1102
- constrainWidthByEmbed?: boolean;
1103
- theme?: "light" | "dark";
1104
- cardLayout?: CardLayout;
1105
- }
1106
- declare const SnapchatEmbed: React.FC<SnapchatEmbedProps>;
1107
-
1108
1079
  interface TelegramEmbedProps {
1109
1080
  url: string;
1110
1081
  width?: string | number;
@@ -1286,4 +1257,4 @@ interface ApplePodcastsEmbedProps {
1286
1257
  }
1287
1258
  declare const ApplePodcastsEmbed: React.FC<ApplePodcastsEmbedProps>;
1288
1259
 
1289
- export { AppleMusicEmbed, type AppleMusicEmbedProps, ApplePodcastsEmbed, type ApplePodcastsEmbedProps, ArchiveOrgEmbed, type ArchiveOrgEmbedProps, BilibiliEmbed, type BilibiliEmbedProps, BlueskyEmbed, type BlueskyEmbedProps, type CardLayout, CardLayoutProvider, DailymotionEmbed, type DailymotionEmbedProps, DeezerEmbed, type DeezerEmbedProps, type EmbedBadge, EmbedCard, type EmbedCardProps, type EmbedMedia, type EmbedMetaItem, FacebookEmbed, type FacebookEmbedProps, InstagramEmbed, type InstagramEmbedProps, KickEmbed, type KickEmbedProps, LinkedInEmbed, type LinkedInEmbedProps, MastodonEmbed, type MastodonEmbedProps, MediaPlayer, type MediaPlayerProps, OdyseeEmbed, type OdyseeEmbedProps, PinterestEmbed, type PinterestEmbedProps, PlatformIcon, type PlatformIconName, RedditEmbed, type RedditEmbedProps, RumbleEmbed, type RumbleEmbedProps, SnapchatEmbed, type SnapchatEmbedProps, SoundCloudEmbed, type SoundCloudEmbedProps, SpotifyEmbed, type SpotifyEmbedProps, TelegramEmbed, type TelegramEmbedProps, ThreadsEmbed, type ThreadsEmbedProps, TidalEmbed, type TidalEmbedProps, TikTokEmbed, type TikTokEmbedProps, TruthSocialEmbed, type TruthSocialEmbedProps, TumblrEmbed, type TumblrEmbedProps, TwitchEmbed, type TwitchEmbedProps, XEmbed, type XEmbedProps, YouTubeEmbed, type YouTubeEmbedProps };
1260
+ export { AppleMusicEmbed, type AppleMusicEmbedProps, ApplePodcastsEmbed, type ApplePodcastsEmbedProps, ArchiveOrgEmbed, type ArchiveOrgEmbedProps, BilibiliEmbed, type BilibiliEmbedProps, BlueskyEmbed, type BlueskyEmbedProps, type CardLayout, CardLayoutProvider, DailymotionEmbed, type DailymotionEmbedProps, DeezerEmbed, type DeezerEmbedProps, type EmbedBadge, EmbedCard, type EmbedCardProps, type EmbedMedia, type EmbedMetaItem, FacebookEmbed, type FacebookEmbedProps, InstagramEmbed, type InstagramEmbedProps, KickEmbed, type KickEmbedProps, LinkedInEmbed, type LinkedInEmbedProps, MastodonEmbed, type MastodonEmbedProps, MediaPlayer, type MediaPlayerProps, OdyseeEmbed, type OdyseeEmbedProps, PinterestEmbed, type PinterestEmbedProps, PlatformIcon, type PlatformIconName, RedditEmbed, type RedditEmbedProps, RumbleEmbed, type RumbleEmbedProps, SoundCloudEmbed, type SoundCloudEmbedProps, SpotifyEmbed, type SpotifyEmbedProps, TelegramEmbed, type TelegramEmbedProps, ThreadsEmbed, type ThreadsEmbedProps, TidalEmbed, type TidalEmbedProps, TikTokEmbed, type TikTokEmbedProps, TruthSocialEmbed, type TruthSocialEmbedProps, TumblrEmbed, type TumblrEmbedProps, TwitchEmbed, type TwitchEmbedProps, XEmbed, type XEmbedProps, YouTubeEmbed, type YouTubeEmbedProps };
package/dist/index.d.ts CHANGED
@@ -282,10 +282,6 @@ declare const PLATFORM_ICON_PATHS: {
282
282
  readonly viewBox: "0 0 24 24";
283
283
  readonly path: "M5.34 0A5.328 5.328 0 000 5.34v13.32A5.328 5.328 0 005.34 24h13.32A5.328 5.328 0 0024 18.66V5.34A5.328 5.328 0 0018.66 0zm6.525 2.568c2.336 0 4.448.902 6.056 2.587 1.224 1.272 1.912 2.619 2.264 4.392.12.59.12 2.2.007 2.864a8.506 8.506 0 01-3.24 5.296c-.608.46-2.096 1.261-2.336 1.261-.088 0-.096-.091-.056-.46.072-.592.144-.715.48-.856.536-.224 1.448-.874 2.008-1.435a7.644 7.644 0 002.008-3.536c.208-.824.184-2.656-.048-3.504-.728-2.696-2.928-4.792-5.624-5.352-.784-.16-2.208-.16-3 0-2.728.56-4.984 2.76-5.672 5.528-.184.752-.184 2.584 0 3.336.456 1.832 1.64 3.512 3.192 4.512.304.2.672.408.824.472.336.144.408.264.472.856.04.36.03.464-.056.464-.056 0-.464-.176-.896-.384l-.04-.03c-2.472-1.216-4.056-3.274-4.632-6.012-.144-.706-.168-2.392-.03-3.04.36-1.74 1.048-3.1 2.192-4.304 1.648-1.737 3.768-2.656 6.128-2.656zm.134 2.81c.409.004.803.04 1.106.106 2.784.62 4.76 3.408 4.376 6.174-.152 1.114-.536 2.03-1.216 2.88-.336.43-1.152 1.15-1.296 1.15-.023 0-.048-.272-.048-.603v-.605l.416-.496c1.568-1.878 1.456-4.502-.256-6.224-.664-.67-1.432-1.064-2.424-1.246-.64-.118-.776-.118-1.448-.008-1.02.167-1.81.562-2.512 1.256-1.72 1.704-1.832 4.342-.264 6.222l.413.496v.608c0 .336-.027.608-.06.608-.03 0-.264-.16-.512-.36l-.034-.011c-.832-.664-1.568-1.842-1.872-2.997-.184-.698-.184-2.024.008-2.72.504-1.878 1.888-3.335 3.808-4.019.41-.145 1.133-.22 1.814-.211zm-.13 2.99c.31 0 .62.06.844.178.488.253.888.745 1.04 1.259.464 1.578-1.208 2.96-2.72 2.254h-.015c-.712-.331-1.096-.956-1.104-1.77 0-.733.408-1.371 1.112-1.745.224-.117.534-.176.844-.176zm-.011 4.728c.988-.004 1.706.349 1.97.97.198.464.124 1.932-.218 4.302-.232 1.656-.36 2.074-.68 2.356-.44.39-1.064.498-1.656.288h-.003c-.716-.257-.87-.605-1.164-2.644-.341-2.37-.416-3.838-.218-4.302.262-.616.974-.966 1.97-.97z";
284
284
  };
285
- readonly snapchat: {
286
- readonly viewBox: "0 0 24 24";
287
- readonly path: "M12 0C8.74 0 6.06 2.67 6.06 5.96c0 1.6.63 3.26 1.78 4.55.16.18.26.35.25.46-.03.27-.62 1.15-1.25 1.45-.39.19-.94.36-1.52.54-.37.11-.75.22-1.11.35-.6.22-.7.6-.67.88.07.66.92.99 2.49 1.31.6.12 1.27.25 1.38.35.1.62.3 1.29.61 1.89.6 1.2 1.9 1.9 3.87 1.9s3.28-.7 3.88-1.9c.31-.6.5-1.27.6-1.89.11-.1.79-.23 1.39-.35 1.56-.32 2.41-.65 2.49-1.31.03-.28-.07-.66-.67-.88-.36-.13-.74-.24-1.11-.35-.58-.18-1.13-.35-1.52-.54-.63-.3-1.22-1.18-1.25-1.45-.01-.11.09-.28.25-.46 1.15-1.29 1.78-2.95 1.78-4.55C17.94 2.67 15.26 0 12 0z";
288
- };
289
285
  };
290
286
  type PlatformIconName = keyof typeof PLATFORM_ICON_PATHS;
291
287
  type PlatformIconProps = React.SVGProps<SVGSVGElement> & {
@@ -1080,31 +1076,6 @@ interface PinterestEmbedProps {
1080
1076
  }
1081
1077
  declare const PinterestEmbed: React.FC<PinterestEmbedProps>;
1082
1078
 
1083
- interface SnapchatEmbedProps {
1084
- url: string;
1085
- width?: string | number;
1086
- maxWidth?: string | number;
1087
- height?: string | number;
1088
- className?: string;
1089
- style?: React.CSSProperties;
1090
- /** Whether to include script tag (default: true). Set false if loading globally. */
1091
- scriptLoad?: boolean;
1092
- disableCard?: boolean;
1093
- showCTA?: boolean;
1094
- ctaLabel?: string;
1095
- ctaLabelIcon?: boolean;
1096
- ctaLabelIconPosition?: "before" | "after";
1097
- ctaUsePlatformColor?: boolean;
1098
- ctaUsePlatformIconColor?: boolean;
1099
- ctaAlignment?: "left" | "center" | "right";
1100
- embedAlignment?: "left" | "center" | "right";
1101
- showBranding?: boolean;
1102
- constrainWidthByEmbed?: boolean;
1103
- theme?: "light" | "dark";
1104
- cardLayout?: CardLayout;
1105
- }
1106
- declare const SnapchatEmbed: React.FC<SnapchatEmbedProps>;
1107
-
1108
1079
  interface TelegramEmbedProps {
1109
1080
  url: string;
1110
1081
  width?: string | number;
@@ -1286,4 +1257,4 @@ interface ApplePodcastsEmbedProps {
1286
1257
  }
1287
1258
  declare const ApplePodcastsEmbed: React.FC<ApplePodcastsEmbedProps>;
1288
1259
 
1289
- export { AppleMusicEmbed, type AppleMusicEmbedProps, ApplePodcastsEmbed, type ApplePodcastsEmbedProps, ArchiveOrgEmbed, type ArchiveOrgEmbedProps, BilibiliEmbed, type BilibiliEmbedProps, BlueskyEmbed, type BlueskyEmbedProps, type CardLayout, CardLayoutProvider, DailymotionEmbed, type DailymotionEmbedProps, DeezerEmbed, type DeezerEmbedProps, type EmbedBadge, EmbedCard, type EmbedCardProps, type EmbedMedia, type EmbedMetaItem, FacebookEmbed, type FacebookEmbedProps, InstagramEmbed, type InstagramEmbedProps, KickEmbed, type KickEmbedProps, LinkedInEmbed, type LinkedInEmbedProps, MastodonEmbed, type MastodonEmbedProps, MediaPlayer, type MediaPlayerProps, OdyseeEmbed, type OdyseeEmbedProps, PinterestEmbed, type PinterestEmbedProps, PlatformIcon, type PlatformIconName, RedditEmbed, type RedditEmbedProps, RumbleEmbed, type RumbleEmbedProps, SnapchatEmbed, type SnapchatEmbedProps, SoundCloudEmbed, type SoundCloudEmbedProps, SpotifyEmbed, type SpotifyEmbedProps, TelegramEmbed, type TelegramEmbedProps, ThreadsEmbed, type ThreadsEmbedProps, TidalEmbed, type TidalEmbedProps, TikTokEmbed, type TikTokEmbedProps, TruthSocialEmbed, type TruthSocialEmbedProps, TumblrEmbed, type TumblrEmbedProps, TwitchEmbed, type TwitchEmbedProps, XEmbed, type XEmbedProps, YouTubeEmbed, type YouTubeEmbedProps };
1260
+ export { AppleMusicEmbed, type AppleMusicEmbedProps, ApplePodcastsEmbed, type ApplePodcastsEmbedProps, ArchiveOrgEmbed, type ArchiveOrgEmbedProps, BilibiliEmbed, type BilibiliEmbedProps, BlueskyEmbed, type BlueskyEmbedProps, type CardLayout, CardLayoutProvider, DailymotionEmbed, type DailymotionEmbedProps, DeezerEmbed, type DeezerEmbedProps, type EmbedBadge, EmbedCard, type EmbedCardProps, type EmbedMedia, type EmbedMetaItem, FacebookEmbed, type FacebookEmbedProps, InstagramEmbed, type InstagramEmbedProps, KickEmbed, type KickEmbedProps, LinkedInEmbed, type LinkedInEmbedProps, MastodonEmbed, type MastodonEmbedProps, MediaPlayer, type MediaPlayerProps, OdyseeEmbed, type OdyseeEmbedProps, PinterestEmbed, type PinterestEmbedProps, PlatformIcon, type PlatformIconName, RedditEmbed, type RedditEmbedProps, RumbleEmbed, type RumbleEmbedProps, SoundCloudEmbed, type SoundCloudEmbedProps, SpotifyEmbed, type SpotifyEmbedProps, TelegramEmbed, type TelegramEmbedProps, ThreadsEmbed, type ThreadsEmbedProps, TidalEmbed, type TidalEmbedProps, TikTokEmbed, type TikTokEmbedProps, TruthSocialEmbed, type TruthSocialEmbedProps, TumblrEmbed, type TumblrEmbedProps, TwitchEmbed, type TwitchEmbedProps, XEmbed, type XEmbedProps, YouTubeEmbed, type YouTubeEmbedProps };