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

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

Note for NPM users​

Did you get an 'npm ERR! ERESOLVE unable to resolve dependency tree' error?

If yes, please add --legacy-peer-deps to your installation command like so:

npm install @codesweetly/react-youtube-playlist --legacy-peer-deps

Note for Yarn users​

Did you get a Module not found: Error: Can't resolve '@emotion/react/jsx-runtime' error?

If yes, please install @emotion/react@11.11.1:

yarn add @emotion/react@11.11.1

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:

PropsTypeDefaultDescription
apiKeystringundefined(Required) Your project's YouTube API key. (Learn how to get an API key)
playlistIdstringundefined

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

uniqueNamestringundefined

(Required) A unique name for the <YouTubePlaylist> instance.

Note:

Note for Remix users​

Remix users should add "@codesweetly/react-youtube-playlist" to their remix.config.js file:

remix.config.js
/** @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().

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
tip

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.