React YouTube Playlist Grid

A modern, responsive React component for displaying YouTube playlists in a grid layout with "Load More" functionality.

Features

• 📱 Responsive Grid: Automatically adjusts columns based on screen size.
• 🎨 Modern Design: Built with Tailwind CSS classes (requires Tailwind in your project) or standard CSS.
• ⚡ Performance: Lazy loading support and optimized rendering.
• 🔄 Load More: Built-in support for fetching more videos from a playlist.
• 🎨 Theming: Easily customize colors (brand, buttons, play icons, titles) via simple hex codes.
• ✨ Automatic Metadata: Fetches playlist title and description automatically if not provided.
• 🛠 Flexible: Works with a direct YouTube API Key or a custom backend proxy.

Installation

npm install react-youtube-playlist-grid

Usage

1. Basic Usage (Client-Side)

If you have a public YouTube Data API Key, you can use it directly.

Import the styles:

import 'react-youtube-playlist-grid/dist/index.css';

import { PlaylistsExplorer } from 'react-youtube-playlist-grid';

// Define your initial playlist data
const myPlaylists = [
  {
    id: 'PL2Q8rFbm-4rtedayHej9mwufaLTfvu_Az',
    // title and description can be left empty; the component will fetch them
    config: { gridColumns: 4 }
  }
];

function App() {
  return (
    <div className="p-4">
      <PlaylistsExplorer
        playlists={myPlaylists}
        apiKey="YOUR_YOUTUBE_API_KEY"
        theme={{
            brandColor: '#7c3aed',
            buttonColor: '#1e293b',
            playlistTitleColor: '#000000'
        }}
      />
    </div>
  );
}

2. Custom Theming

You can customize the look and feel using the theme prop:

<PlaylistsExplorer
  playlists={myPlaylists}
  apiKey="..."
  theme={{
    brandColor: '#ff0000',        // Tabs active color
    brandHoverColor: '#cc0000',   // Tabs hover color
    buttonColor: '#000000',       // Load More button background
    buttonTextColor: '#ffffff',   // Load More button text
    playIconColor: '#ff0000',     // Thumbnail play icon color
    playlistTitleColor: '#1e293b' // Active playlist title color
  }}
/>

3. Advanced Usage (Custom Backend)

If you want to hide your API key or use a proxy, provide an onLoadMore callback instead of apiKey.

import { PlaylistsExplorer } from 'react-youtube-playlist-grid';

function App() {
  const handleLoadMore = async (playlistId, pageToken) => {
    // Call your own backend API
    const response = await fetch(`/api/videos?id=${playlistId}&token=${pageToken}`);
    const data = await response.json();
    return {
      videos: data.videos,
      nextPageToken: data.nextPageToken
    };
  };

  return (
    <PlaylistsExplorer
      playlists={myPlaylists}
      onLoadMore={handleLoadMore}
    />
  );
}

Props

| Prop | Type | Description | |------|------|-------------| | playlists | Playlist[] | Required. Array of playlist objects. | | apiKey | string | Optional. Your YouTube Data API Key for client-side fetching. | | onLoadMore | function | Optional. Custom async function to fetch more videos. | | theme | ThemeConfig | Optional. Customize the colors of the component. |

Styling

The component comes with bundled CSS. You must import the CSS file for it to look correct.

import 'react-youtube-playlist-grid/dist/index.css';

License

MIT