Merge pull request #87 from danestves/v2

feat: be able to customize the iframe styles
danestves · Mar 1, 2022 · 48bdabd · 48bdabd
2 parents 354addf + 2fd5a26
commit 48bdabd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/example/src/app.tsx b/example/src/app.tsx
@@ -4,7 +4,10 @@ import { ReactYouTubeLite } from '../../src';
 export function App() {
   return (
     <div>
-      <ReactYouTubeLite url="https://www.youtube.com/watch?v=DVQTGidS1yk" />
+      <ReactYouTubeLite
+        url="https://www.youtube.com/watch?v=DVQTGidS1yk"
+        title='React and the Music Industry | Jameyel "J. Dash" Johnson"'
+      />
     </div>
   );
 }
diff --git a/src/react-youtube-lite/index.tsx b/src/react-youtube-lite/index.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 
 // Internals
-import { StyledAspectRatio, StyledYouTubeIcon } from './react-youtube-lite.styles';
+import { StyledAspectRatio, StyledIframe, StyledYouTubeIcon } from './react-youtube-lite.styles';
 import { addPrefetch } from '../utils/add-prefetch';
 import { getSrcSearch } from '../utils/get-src-search';
 import { getYouTubeId } from '../utils/get-youtube-id';
@@ -68,7 +68,7 @@ function RenderReactYouTubeLite(
       {...props}
     >
       {iframe ? (
-        <iframe
+        <StyledIframe
           width={560}
           height={315}
           title={title}
@@ -80,7 +80,7 @@ function RenderReactYouTubeLite(
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
           {...iframeProps}
-        ></iframe>
+        ></StyledIframe>
       ) : (
         <StyledYouTubeIcon />
       )}

diff --git a/src/react-youtube-lite/react-youtube-lite.styles.ts b/src/react-youtube-lite/react-youtube-lite.styles.ts
@@ -51,4 +51,6 @@ const StyledYouTubeIcon = styled(YouTubeIcon, {
   },
 });
 
-export { StyledAspectRatio, StyledYouTubeIcon };
+const StyledIframe = styled('iframe', {});
+
+export { StyledAspectRatio, StyledIframe, StyledYouTubeIcon };
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -3,6 +3,13 @@ import type * as React from 'react';
 import type * as Stitches from '@stitches/react';
 import type * as YouTube from 'youtube-player/dist/types';
 
+interface IframeProps extends React.ComponentPropsWithoutRef<'iframe'> {
+  /**
+   * It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values.
+   */
+  css?: Stitches.CSS;
+}
+
 interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * This can be either an url to a video or a video ID.
@@ -27,7 +34,7 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * Properties of the iframe element.
    */
-  iframeProps?: React.ComponentPropsWithoutRef<'iframe'>;
+  iframeProps?: IframeProps;
   /**
    * If you use GDPR and don't want YouTube cookies enable this option
    *
@@ -67,4 +74,4 @@ interface ReactYouTubeLiteProps extends React.ComponentPropsWithoutRef<'div'> {
   title?: string;
 }
 
-export { ReactYouTubeLiteProps };
+export { IframeProps, ReactYouTubeLiteProps };