Skip to main content

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:

http://localhost:3000

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.

note
React Explained Clearly Book Now Available at Amazon

Step 2: Create a New React App

Use NPM's create-react-app package to create a new React app called codesweetly-react-youtube-playlist-demo.

npx create-react-app codesweetly-react-youtube-playlist-demo

Alternatively, you can use Yarn to configure your project like so:

yarn create react-app codesweetly-react-youtube-playlist-demo

Step 3: Go Inside the Project Directory

After the installation process, navigate into the project directory like so:

cd codesweetly-react-youtube-playlist-demo

Step 4: Install the React YouTube Playlist Package

Using your text editor, install the React YouTube playlist package locally.

npm install @codesweetly/react-youtube-playlist --save

Step 5: Import the React YouTube Playlist Package

Open your App.js file and import the YouTube playlist package like so:

// App.js

import logo from "./logo.svg";
import "./App.css";
import YouTubePlaylist from "@codesweetly/react-youtube-playlist";

Step 6: Render the React YouTube Playlist Package

After importing the playlist package, render it to the DOM as follows:

// App.js

import logo from "./logo.svg";
import "./App.css";
import YouTubePlaylist from "@codesweetly/react-youtube-playlist";

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<YouTubePlaylist
apiKey="YOUR_YOUTUBE_API_KEY"
playlistId="YOUR_YOUTUBE_PLAYLIST_ID"
uniqueName="THIS_PLAYLIST_INSTANCE_NAME"
/>
</div>
);
}

export default App;

The YouTubePlaylist library accepts three required props:

PropsDescription
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:

Step 7: Run the Application

Take a look at your app in the browser by running the following:

npm start

Or, if your package manager is Yarn, run:

yarn start

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.