@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.

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"
    />
  );
}

Required 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.

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.0.0 (2024-07-16)

⚠ BREAKING CHANGES

• Delete uniqueName prop

🧱 Dependency

• Bump dev dependencies (370c88d)
• Drop fslightbox-react dependency (366d15d)
• Drop prop-types dependency (33535e0)
• Drop react-loader-spinner dependency (8da1c02)

🏠 Chores

• Delete console.log (444f030)

📝 Documentation

• Delete uniqueName prop (e8570f4)
• Update description (67799ef)

🐛 Bug Fix

• Open lightbox when keyboard enter key is pressed on video card (3112a50)
• Stop video when lightbox is closed (9cdc3de)

🔄️ Code Refactoring

• Create video cards only while rendering gallery (9f2271f)
• Delete redundant isNotFetchingData state (ac0a70b)
• Delete uniqueName prop (29df23c)
• Make infinite scrolling performant (85e097f)
• Rename youtubeVideoFiguresArray to videoCardsArray (712d5e1)
• Separate gallery and loader's container (cc4a06b)
• Use async/await to implement asynchronous logic (0ef52ee)

💅 Styling and Formatting

• Change class declaration to function (bf06811)
• Change javascript file to typescript (5a53ff0)

🧪 Code Testing

• Mock the intersection observer api (23da8ca)