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 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
- Yarn
- pnpm
npm install @codesweetly/react-youtube-playlist --save
yarn add @codesweetly/react-youtube-playlist
pnpm add @codesweetly/react-youtube-playlist
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:
Props | Description |
---|---|
apiKey | The |
playlistId | The Note: A playlist's ID is the list of characters after the "list=" in the URL—for instance, |
uniqueName | The 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.