@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

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	Description
apiKey	The apiKey props is a string value that specifies your project's YouTube API key. (Learn how to get an API key)
playlistId	The playlistId props is a string value that specifies 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	The uniqueName props is a string value that specifies 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

2.0.0 (2024-01-03)

⚠ BREAKING CHANGES

• Users must now use named importation to add the package to their apps.

Named importation provides better compatibility with node and babel-like tools.

Ref: https://esbuild.github.io/content-types/#default-interop

🧱 Dependency

• Bump @types/react to v18.2.46 (95b9c9e)
• Configure jest to read typescript configuration files (e514fc4)
• Remove emotionjs package (94e5ee2)
• Remove jest-transform-css configurations (f5ee273)

🏠 Chores

• Add email (e4ac718)
• Change commitlint configuration file to typescript (a4a356a)
• Change entry point from index to YouTubePlaylist (2634c14)
• Delete css modules type declaration file (7aa8ec4)
• Provide url and email for reporting bugs (914a125)

📝 Documentation

• Add contact email (95dbc01)
• Add emotion installation note for yarn users (354a365)
• Remove emotionjs references and change import statement to named importation (501bd0c)
• Update license's year (081b997)

🔄️ Code Refactoring

• Change package's export mode from default to named exportation (9a0885d)
• Rename index files to YouTubePlaylist (01d1eb8)

💅 Styling and Formatting

• Remove emotion's configurations (f33d542)
• Replace emotion css with inline styling (b7f2b0b)
• Use spinner color with aa contrast on dark and light scheme (0934bc5)

🧪 Code Testing

• Add configuration file to the test command (51ad035)
• Change jest configuration file to typescript (392cb57)