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.