react-youtube-playlist-grid 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# React YouTube Playlist Grid
|
|
2
|
+
|
|
3
|
+
A modern, responsive React component for displaying YouTube playlists in a grid layout with "Load More" functionality.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- 📱 **Responsive Grid**: Automatically adjusts columns based on screen size.
|
|
11
|
+
- 🎨 **Modern Design**: Built with Tailwind CSS classes (requires Tailwind in your project) or standard CSS.
|
|
12
|
+
- ⚡ **Performance**: Lazy loading support and optimized rendering.
|
|
13
|
+
- 🔄 **Load More**: Built-in support for fetching more videos from a playlist.
|
|
14
|
+
- 🛠 **Flexible**: Works with a direct YouTube API Key or a custom backend proxy.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install react-youtube-playlist-grid
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
### 1. Basic Usage (Client-Side)
|
|
25
|
+
|
|
26
|
+
If you have a public YouTube Data API Key, you can use it directly.
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
import { PlaylistsExplorer } from 'react-youtube-playlist-grid';
|
|
30
|
+
|
|
31
|
+
// Define your initial playlist data
|
|
32
|
+
const myPlaylists = [
|
|
33
|
+
{
|
|
34
|
+
id: 'PL2Q8rFbm-4rtedayHej9mwufaLTfvu_Az',
|
|
35
|
+
title: 'C# Concepts',
|
|
36
|
+
description: 'Learn C# basics',
|
|
37
|
+
videos: [], // Can be empty initially or pre-filled
|
|
38
|
+
config: { showDescription: true, title: 'C# Series', id: '...' }
|
|
39
|
+
}
|
|
40
|
+
];
|
|
41
|
+
|
|
42
|
+
function App() {
|
|
43
|
+
return (
|
|
44
|
+
<div className="p-4">
|
|
45
|
+
<PlaylistsExplorer
|
|
46
|
+
initialPlaylists={myPlaylists}
|
|
47
|
+
apiKey="YOUR_YOUTUBE_API_KEY"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### 2. Advanced Usage (Custom Backend)
|
|
55
|
+
|
|
56
|
+
If you want to hide your API key or use a proxy, provide an `onLoadMore` callback instead of `apiKey`.
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { PlaylistsExplorer } from 'react-youtube-playlist-grid';
|
|
60
|
+
|
|
61
|
+
function App() {
|
|
62
|
+
const handleLoadMore = async (playlistId, pageToken) => {
|
|
63
|
+
// Call your own backend API
|
|
64
|
+
const response = await fetch(\`/api/videos?id=\${playlistId}&token=\${pageToken}\`);
|
|
65
|
+
const data = await response.json();
|
|
66
|
+
return {
|
|
67
|
+
videos: data.videos,
|
|
68
|
+
nextPageToken: data.nextPageToken
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
return (
|
|
73
|
+
<PlaylistsExplorer
|
|
74
|
+
initialPlaylists={myPlaylists}
|
|
75
|
+
onLoadMore={handleLoadMore}
|
|
76
|
+
/>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Props
|
|
82
|
+
|
|
83
|
+
| Prop | Type | Description |
|
|
84
|
+
|------|------|-------------|
|
|
85
|
+
| `initialPlaylists` | `Playlist[]` | **Required**. Array of playlist objects to display tabs. |
|
|
86
|
+
| `apiKey` | `string` | Optional. Your YouTube Data API Key for client-side fetching. |
|
|
87
|
+
| `onLoadMore` | `function` | Optional. Custom async function to fetch more videos. |
|
|
88
|
+
|
|
89
|
+
## Styling
|
|
90
|
+
|
|
91
|
+
This component uses **Tailwind CSS** utility classes internally for layout and styling. For it to look correct, your project should have Tailwind CSS configured.
|
|
92
|
+
|
|
93
|
+
## License
|
|
94
|
+
|
|
95
|
+
MIT
|
package/package.json
CHANGED