feat: support CSS-in-JS solutions (#226)

BREAKING CHANGE: the `containerClassName` prop was renamed to `className`, the `containerStyle` prop was renamed to `style`, and the iframe class is now passed via the `iframeClassName` prop.
tjallingt · Apr 28, 2022 · 654418d · 654418d
1 parent 90d5d58
commit 654418d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -37,8 +37,8 @@ pnpm add react-youtube
   videoId={string}                  // defaults -> ''
   id={string}                       // defaults -> ''
   className={string}                // defaults -> ''
-  containerClassName={string}       // defaults -> ''
-  containerStyle={object}           // defaults -> {}
+  iframeClassName={string}          // defaults -> ''
+  style={object}                    // defaults -> {}
   title={string}                    // defaults -> ''
   loading={string}                  // defaults -> undefined
   opts={obj}                        // defaults -> {}

diff --git a/packages/react-youtube/src/YouTube.tsx b/packages/react-youtube/src/YouTube.tsx
@@ -53,14 +53,15 @@ function shouldResetPlayer(prevProps: YouTubeProps, props: YouTubeProps) {
 }
 
 /**
- * Check whether a props change should result in an id or className update.
+ * Check whether a props change should result in an update of player.
  */
 function shouldUpdatePlayer(prevProps: YouTubeProps, props: YouTubeProps) {
   return (
     prevProps.id !== props.id ||
     prevProps.className !== props.className ||
     prevProps.opts?.width !== props.opts?.width ||
     prevProps.opts?.height !== props.opts?.height ||
+    prevProps.iframeClassName !== props.iframeClassName ||
     prevProps.title !== props.title
   );
 }
@@ -97,13 +98,13 @@ export type YouTubeProps = {
    */
   className?: string;
   /**
-   * Custom class name for the player container element
+   * Custom class name for the iframe element
    */
-  containerClassName?: string;
+  iframeClassName?: string;
   /**
-   * Custom styles for the player container element
+   * Custom style for the player container element
    */
-  containerStyle?: React.CSSProperties;
+  style?: React.CSSProperties;
   /**
    * Title of the video for the iframe's title tag.
    */
@@ -161,8 +162,8 @@ const defaultProps: YouTubeProps = {
   videoId: '',
   id: '',
   className: '',
-  containerClassName: '',
-  containerStyle: {},
+  iframeClassName: '',
+  style: {},
   title: '',
   loading: undefined,
   opts: {},
@@ -180,8 +181,8 @@ const propTypes = {
   videoId: PropTypes.string,
   id: PropTypes.string,
   className: PropTypes.string,
-  containerClassName: PropTypes.string,
-  containerStyle: PropTypes.object,
+  iframeClassName: PropTypes.string,
+  style: PropTypes.object,
   title: PropTypes.string,
   loading: PropTypes.oneOf(['lazy', 'eager']),
   opts: PropTypes.objectOf(PropTypes.any),
@@ -340,7 +341,7 @@ class YouTube extends React.Component<YouTubeProps> {
     this.internalPlayer?.getIframe().then((iframe) => {
       if (this.props.id) iframe.setAttribute('id', this.props.id);
       else iframe.removeAttribute('id');
-      if (this.props.className) iframe.setAttribute('class', this.props.className);
+      if (this.props.iframeClassName) iframe.setAttribute('class', this.props.iframeClassName);
       else iframe.removeAttribute('class');
       if (this.props.opts && this.props.opts.width) iframe.setAttribute('width', this.props.opts.width.toString());
       else iframe.removeAttribute('width');
@@ -402,8 +403,8 @@ class YouTube extends React.Component<YouTubeProps> {
 
   render() {
     return (
-      <div className={this.props.containerClassName} style={this.props.containerStyle}>
-        <div id={this.props.id} className={this.props.className} ref={this.refContainer} />
+      <div className={this.props.className} style={this.props.style}>
+        <div id={this.props.id} className={this.props.iframeClassName} ref={this.refContainer} />
       </div>
     );
   }

diff --git a/packages/react-youtube/src/Youtube.test.tsx b/packages/react-youtube/src/Youtube.test.tsx
@@ -29,6 +29,19 @@ describe('YouTube', () => {
     expect(queryByAttribute('class', container, 'custom-class')).toBeDefined();
   });
 
+  it('should render an iframe with a custom class name', () => {
+    const { container } = render(<YouTube iframeClassName="custom-frame-class" videoId="XxVg_s8xAms" />);
+
+    expect(queryByAttribute('class', container, 'custom-frame-class')).toBeDefined();
+  });
+
+  it("should update iframe class name once it's changed", () => {
+    const { container, rerender } = render(<YouTube iframeClassName="custom-frame-class" videoId="XxVg_s8xAms" />);
+
+    rerender(<YouTube iframeClassName="custom-frame-class-2" videoId="XxVg_s8xAms" />);
+    expect(queryByAttribute('class', container, 'custom-frame-class-2')).toBeDefined();
+  });
+
   it('should update an id', () => {
     const { rerender } = render(<YouTube id="custom-id" videoId="XxVg_s8xAms" />);