diff --git a/README.md b/README.md index cda93c4..ad13639 100644 --- 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 index 372d388..f20b83a 100644 --- a/packages/react-youtube/src/YouTube.tsx +++ b/packages/react-youtube/src/YouTube.tsx @@ -53,7 +53,7 @@ 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 ( @@ -61,6 +61,7 @@ function shouldUpdatePlayer(prevProps: YouTubeProps, props: YouTubeProps) { 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 { 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 { render() { return ( -
-
+
+
); } diff --git a/packages/react-youtube/src/Youtube.test.tsx b/packages/react-youtube/src/Youtube.test.tsx index 65aa626..e45036c 100644 --- 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(); + + expect(queryByAttribute('class', container, 'custom-frame-class')).toBeDefined(); + }); + + it("should update iframe class name once it's changed", () => { + const { container, rerender } = render(); + + rerender(); + expect(queryByAttribute('class', container, 'custom-frame-class-2')).toBeDefined(); + }); + it('should update an id', () => { const { rerender } = render();