@codesweetly/react-youtube-playlist

React YouTube Playlist

A simple, easy-to-use, and responsive playlist component with a lightbox for displaying a beautiful gallery of YouTube videos in React apps.

Features

• SEO friendly
• Fullscreen support
• Keyboard accessible
• Mobile responsive
• Lightbox with translucent background
• Set column numbers dynamically or manually
• Customizable styles

Live Demo and Tutorial

Available at: https://codesweetly.com/react-youtube-playlist

Installation

This section shows how to install the React YouTube Playlist package.

Using npm

npm install @codesweetly/react-youtube-playlist

Using yarn

yarn add @codesweetly/react-youtube-playlist

Using pnpm

pnpm add @codesweetly/react-youtube-playlist

Usage

import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";

function App() {
  return (
    <YouTubePlaylist
      apiKey="YOUR_YOUTUBE_API_KEY"
      playlistId="YOUR_YOUTUBE_PLAYLIST_ID"
    />
  );
}

Props

Props	Type	Default	Description
apiKey	string	undefined	(Required) Your project's YouTube API key. (Learn how to get an API key)
playlistId	string	undefined	(Required) The ID of the YouTube playlist you wish to display. Note: A playlist's ID is the list of characters after the "list=" in the URL—for instance, https://www.youtube.com/playlist?list=playlistID.
columnCount	number or keyword (string)	"auto"	(Optional) The number of columns.
columnWidth	number or keyword (string)	230	(Optional) The minimum width of the gallery's columns.
gapSize	number	24	(Optional) The gallery's gap size.
customStyles	ImageGalleryStylesType	{}	(Optional) Custom styles to override the following element's default styles: Loader container: loaderContainer Gallery container: galleryContainerStyle Gallery image button: imageBtnStyle Gallery video container: videoContainerStyle Gallery image element: videoImageStyle Gallery video caption: videoCaptionStyle Modal container: modalContainerStyle Modal slide number: modalSlideNumberStyle Modal toolbar: modalToolbarStyle Modal toolbar button: modalToolbarBtnStyle Modal slideshow section: modalSlideShowSectionStyle Modal iframe element: modalIFrameStyle Modal slide button: modalSlideBtnStyle

Note for Remix Users

Remix users should add "@codesweetly/react-youtube-playlist" to their remix.config.js file:

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  ignoredRouteFiles: ["**/.*"],
+ serverDependenciesToBundle: ["@codesweetly/react-youtube-playlist"],
  serverModuleFormat: "cjs",
};

The serverDependenciesToBundle field tells Remix to transpile and include the "@codesweetly/react-youtube-playlist" package in the server bundle.

Note for NextJS users

NextJS users should declare the "use client" directive at the top of their file. It should sit above all other import statements like so:

+ "use client";
import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";
import { ImageGallery } from "react-image-grid-gallery";

The "use client" directive tells NextJS to consider all modules imported into the page as part of the Client Component module graph.

The YouTubePlaylist package works only as a Client Component because it uses React's State and Lifecycle effects, such as useState() and useEffect().

Build

npm run build

Demo

https://codesweetly.com/react-youtube-playlist

Support

🍵 Buy me a coffee

Changelog

3.1.0 (2025-01-09)

• build: Add support for react 19 (8c07aef)
• build: Bump @release-it/conventional-changelog@latest from v9.0.3 to v9.0.4 (a7aca78)
• build: Bump dotenv-cli from v7.4.4 to v8.0.0 (0782bfe)
• build: Bump react from v18.3.1 to v19.0.0 (1fc2829)
• build: Bump release-it to v18.0.0 (1f959d4)
• build: Bump typescript from v5.7.2 to v5.7.3 (77f76ac)
• build: Downgrade release-it to from v18.0.0 to v17.11.0 (6e4d701)
• build: Revert back to react v18.3.1 (dae3f83)
• docs: Add features section (094959e)
• style: Specify the gallery images' initial aspect ratio (27653fb)
• feat: Provide the option to specify the exact number of columns in the gallery (0c2e54d)
• test: Customize image button's style (946004e)
• refactor: Make styles customizable (d6d328f)
• chore: Add watch script (07a651c)
• chore: Reconfigure commit-msg hook (5c39c72)