@codesweetly/react-youtube-playlist v2.0.0
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
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"
uniqueName="THIS_PLAYLIST_INSTANCE_NAME"
/>
);
}
Required Props
(Required) Your project's YouTube API key. (Learn how to get an API key)
(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
.
(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 theuniqueName
props.
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
Dependencies
Demo
4 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago