3.1.3 • Published 7 months ago

@codesweetly/react-youtube-playlist

Licence

MIT

Version

3.1.3

Deps

Size

42 kB

Vulns

Weekly

Stars

Summary Dependency Versions

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.

npm NPM

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().