@codesweetly/react-youtube-playlist

React YouTube Playlist

An easy-to-use and responsive React component for displaying YouTube playlists on a web app. Create a beautiful gallery of YouTube videos.

Live Demo and Tutorial

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

Installation

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

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.
uniqueName	string	undefined	(Required) A unique name for the <YouTubePlaylist> instance. Note: No two <YouTubePlaylist> on a single page must have the same name. Use the HTML id attribute's naming convention for the uniqueName props.

Changelog

1.0.8 (2023-07-18)

🔄️ Code Refactoring

• Convert code to typescript (9ff1ee8), closes #1
• Rename lengthScrolled to viewportLengthScrolled (ce32701)

🧪 Code Testing

• Check if playlist correctly renders when given all arguments (d68d635)
• Configure jest as the package's test runner tool (607bd1c)

📝 Documentation

• Add type and default columns to the table (9861a89)

🏠 Chores

• Add 'files' field (8d678eb)
• Change file from .jsx to .tsx (c0f2009)
• Create types files (711fddf)
• Define data variable's type (f668a58)
• Delete src directory (d708016)
• Rename YouTubePlaylist.css to index.css (a220fd2)
• Replace Loader.css with react-loader-spinner (9ffacf5), closes #2
• Track configurations (192426c)
• Update types (ff11203)
• Use balltriangle spinner (f30268b)

🧱 Dependency

• Add dependencies field (8bb6c7d)
• Add react to devDependencies (d1daf43)
• Add TypeScript (1222ccb)
• Change entry point to index.js (dd232f3)
• Update packages (c9ce844)