Merge pull request #7 from codesweetly/refactor/make-styles-customizable

refactor: Make styles customizable
codesweetly · Jan 9, 2025 · 80f3c70 · 80f3c70
2 parents 97bf5e3 + 77f76ac
commit 80f3c70
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 106 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,16 @@ A simple, easy-to-use, and responsive playlist component with a lightbox for dis
 
 ![npm](https://img.shields.io/npm/v/@codesweetly/react-youtube-playlist) ![NPM](https://img.shields.io/npm/l/@codesweetly/react-youtube-playlist)
 
+## Features
+
+- SEO friendly
+- Fullscreen support
+- Keyboard accessible
+- Mobile responsive
+- Lightbox with translucent background
+- Set column numbers dynamically or manually
+- Customizable styles
+
 ## Live Demo and Tutorial
 
 Available at: https://codesweetly.com/react-youtube-playlist
@@ -45,7 +55,7 @@ function App() {
 }
 ```
 
-## Required Props
+## Props
 
 <table>
 <thead>
@@ -77,6 +87,76 @@ function App() {
 
 **Note:** A playlist's ID is the list of characters after the **"list="** in the [URL](https://codesweetly.com/web-address-url)—for instance, `https://www.youtube.com/playlist?list=playlistID`.
 
+</td>
+</tr>
+<tr>
+<td>
+
+[`columnCount`](https://codesweetly.com/css-multi-column-layout-explained#what-is-a-css-column-count-property)
+
+</td>
+<td>number or keyword (string)</td>
+<td><code>"auto"</code></td>
+<td>
+
+(**Optional**) The number of columns.
+
+</td>
+</tr>
+<tr>
+<td>
+
+[`columnWidth`](https://codesweetly.com/css-multi-column-layout-explained#what-is-a-css-column-width-property)
+
+</td>
+<td>number or keyword (string)</td>
+<td><code>230</code></td>
+<td>
+
+(**Optional**) The minimum width of the gallery's columns.
+
+</td>
+</tr>
+<tr>
+<td>
+
+[`gapSize`](https://codesweetly.com/css-gap-property)
+
+</td>
+<td>number</td>
+<td><code>24</code></td>
+<td>
+
+(**Optional**) The gallery's gap size.
+
+</td>
+</tr>
+<tr>
+<td>
+
+`customStyles`
+
+</td>
+<td>ImageGalleryStylesType</td>
+<td><code>{}</code></td>
+<td>
+
+(**Optional**) Custom styles to override the following element's default styles:
+
+- Loader container: `loaderContainer`
+- Gallery container: `galleryContainerStyle`
+- Gallery image button: `imageBtnStyle`
+- Gallery video container: `videoContainerStyle`
+- Gallery image element: `videoImageStyle`
+- Gallery video caption: `videoCaptionStyle`
+- Modal container: `modalContainerStyle`
+- Modal slide number: `modalSlideNumberStyle`
+- Modal toolbar: `modalToolbarStyle`
+- Modal toolbar button: `modalToolbarBtnStyle`
+- Modal slideshow section: `modalSlideShowSectionStyle`
+- Modal iframe element: `modalIFrameStyle`
+- Modal slide button: `modalSlideBtnStyle`
+
 </td>
 </tr>
 </tbody>
@@ -103,8 +183,8 @@ The [`serverDependenciesToBundle`](https://remix.run/docs/en/1.19.0/file-convent
 
 ```diff
 + "use client";
-import YouTubePlaylist from "@codesweetly/react-youtube-playlist";
-import ImageGallery from "react-image-grid-gallery";
+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.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
     "release": "dotenv release-it --",
     "test": "jest --config jest.config.ts",
+    "watch": "tsc --watch",
     "prepare": "husky"
   },
   "files": [
@@ -44,7 +45,7 @@
     "@jest/globals": "^29.7.0",
     "@release-it/conventional-changelog": "^9.0.4",
     "@testing-library/react": "^16.1.0",
-    "@types/react": "^19.0.3",
+    "@types/react": "^19.0.4",
     "dotenv-cli": "^8.0.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
@@ -53,7 +54,7 @@
     "release-it": "^17.11.0",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
     "react": "^19.0.0"

diff --git a/src/YouTubePlaylist.test.tsx b/src/YouTubePlaylist.test.tsx
@@ -6,3 +6,22 @@ import { YouTubePlaylist } from "./YouTubePlaylist";
 test("youtube playlist renders correctly", () => {
   render(<YouTubePlaylist apiKey="" playlistId="" />);
 });
+
+test("youtube playlist renders correctly with custom styles", () => {
+  const videoContainerStyle: React.CSSProperties = {
+    margin: `0 0 0`,
+    position: "relative",
+  };
+
+  const imageBtnStyle: React.CSSProperties = {
+    border: "4px solid purple",
+  };
+
+  render(
+    <YouTubePlaylist
+      apiKey=""
+      playlistId=""
+      customStyles={{ videoContainerStyle, imageBtnStyle }}
+    />
+  );
+});