How to Add YouTube Playlist to a React App
This article will use a simple project to explain how to use the @codesweetly/react-youtube-playlist
library to add a YouTube playlist to your React application.
Here is a demo of what we will build:
Without any further ado, let's get started with the first step.
Step 1: Get the Right Node and NPM Version
Make sure you have Node 10.16 (or greater) and NPM 5.6 (or greater) installed on your system.
- Use this package manager guide to install, update, or verify your Node version.
- If you prefer to use Yarn, make sure you have Yarn 0.25 (or greater).
Step 2: Create a New React App
Use Vite to create a new React app.
npm create vite@latest
Alternatively, you can use Yarn or pnpm to configure your project like so:
yarn create vite
pnpm create vite
The choice of Vite is purely a random one. The concept of this tutorial applies to other React applications such as Create React App, Next.js, and Gatsby.
In other words, don't worry if you are unfamiliar with ViteJS. We will only use its basic features to learn how to add a YouTube playlist to your React app. So, relax—you are in good hands. 😊
After running the above command, Vite will ask the following questions:
- Ok to proceed? (y) Enter the y key on your keyboard to proceed.
- Project name: You can name it anything you wish—for instance,
react-youtube-playlist-demo-001
. - Select a framework: Use your keyboard to select
React
. - Select a variant: Use your keyboard to select
JavaScript + SWC
.
Once you've answered all the questions, Vite will create your new app.
Step 3: Go Inside the Project Directory
After the installation process, navigate into the project directory like so:
cd react-youtube-playlist-demo-001
Step 4: Install the Default Dependencies
Using your text editor, install the default dependencies Vite pre-specified in the package.json
file.
- npm
- Yarn
- pnpm
npm install
yarn install
pnpm install
Step 5: Install the React YouTube Playlist Package
Using your text editor, install the React YouTube playlist package locally.
- npm
- Yarn
- pnpm
npm install @codesweetly/react-youtube-playlist --save
yarn add @codesweetly/react-youtube-playlist
pnpm add @codesweetly/react-youtube-playlist
Master NPM Package Creation
Step 6: Import the React YouTube Playlist Package
Open the App.jsx
file located in the src
folder of your Vite application.
Then, delete all its content. And import the YouTube playlist package like so:
import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";
import "./App.css";
Step 7: Render the React YouTube Playlist Package
After importing the playlist package, render it to the DOM as follows:
import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";
import "./App.css";
function App() {
return (
<>
<YouTubePlaylist
apiKey="YOUR_YOUTUBE_API_KEY"
playlistId="YOUR_YOUTUBE_PLAYLIST_ID"
uniqueName="THIS_PLAYLIST_INSTANCE_NAME"
/>
</>
);
}
export default App;
The YouTubePlaylist
library accepts three 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, |
uniqueName | string | undefined | (Required) A unique name for the Note:
|
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.
Express Your Love for Coding!
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()
.
Step 8: Run the Application
Take a look at your app in the browser by running the following:
- npm
- Yarn
- pnpm
npm run dev
yarn dev
pnpm run dev
Use the react-image-grid-gallery
library to add image galleries to your React applications.
Live Demo
Below is a live demo that uses the React YouTube Playlist package to display CodeSweetly's "Reference" playlist.
Overview
Although we used the @codesweetly/react-youtube-playlist
library on a simple project to create a YouTube playlist, you can use the same principles on any React application.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Join CodeSweetly Newsletter