From 8368821506e7fe84c2003b857f8ac39b2f25bca3 Mon Sep 17 00:00:00 2001 From: Oluwatobi Sofela Date: Mon, 4 May 2026 14:06:57 +0100 Subject: [PATCH 1/2] docs: Add cta property to imagesArray usage example --- .releaserc.mjs | 2 +- README.md | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/.releaserc.mjs b/.releaserc.mjs index 133f24c..1e5cf85 100644 --- a/.releaserc.mjs +++ b/.releaserc.mjs @@ -18,8 +18,8 @@ export default { { type: "fix", release: "patch" }, { type: "perf", release: "patch" }, { type: "refactor", release: "patch" }, - { type: "docs", release: "patch" }, { type: "style", release: "patch" }, + { type: "docs", release: false }, { type: "build", release: false }, { type: "test", release: false }, { type: "chore", release: false }, diff --git a/README.md b/README.md index e014f74..796a8ce 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,12 @@ const imagesArray = [ id: "uniqueid333", alt: "Image3's alt text", caption: "Image3's description", + cta: { + href: "https://example.com", + target: "_blank", + rel: "noopener noreferrer", + text: "Learn more", + }, src: "http://example.com/image3.webp?w=2400", gridSrc: "http://example.com/image3.webp?w=1280", thumbSrc: "http://example.com/image3.webp?w=640", From d20085b95c13dec39712ce37cd25295d6c5f9348 Mon Sep 17 00:00:00 2001 From: Oluwatobi Sofela Date: Mon, 4 May 2026 15:05:42 +0100 Subject: [PATCH 2/2] refactor: Make target and rel cta properties optional --- README.md | 4 ++-- src/ImageGallery.test.tsx | 2 +- src/ImageGallery.types.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 796a8ce..9a9a3d9 100644 --- a/README.md +++ b/README.md @@ -72,8 +72,8 @@ const imagesArray = [ caption: "Image3's description", cta: { href: "https://example.com", - target: "_blank", rel: "noopener noreferrer", + target: "_blank", text: "Learn more", }, src: "http://example.com/image3.webp?w=2400", @@ -120,8 +120,8 @@ The components rely on predefined CSS classes for styling. Importing the stylesh - `caption`: (**Optional** - string) The [image's description](https://www.studysmarter.co.uk/explanations/english/blog/image-caption). - `cta`: (**Optional** - object) This feature lets you add a link to each image's caption in the lightbox, allowing users to visit a related page. The CTA (call-to-action) object accepts the following properties: - `href` (string): The URL that the CTA link will point to. (Required) - - `target` (string): Specifies where to open the linked document (e.g., `_blank` for a new tab). - `rel` (string): Specifies the relationship between the current document and the linked document (e.g., `noopener noreferrer` for security reasons when using `_blank`). + - `target` (string): Specifies where to open the linked document (e.g., `_blank` for a new tab). - `text` (string): The text that will be displayed for the CTA link in the image caption within the lightbox. (Required) - `src`: (**Required** - string) The image's default [URL](https://codesweetly.com/web-address-url). - `gridSrc`: (**Optional** - string) The preferred grid image's URL. diff --git a/src/ImageGallery.test.tsx b/src/ImageGallery.test.tsx index fd0cd9d..fd90595 100644 --- a/src/ImageGallery.test.tsx +++ b/src/ImageGallery.test.tsx @@ -9,8 +9,8 @@ const imagesArray = [ caption: "Image1's description", cta: { href: "https://example.com", - target: "_blank", rel: "noopener noreferrer", + target: "_blank", text: "Learn more", }, src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg", diff --git a/src/ImageGallery.types.tsx b/src/ImageGallery.types.tsx index ec08868..98e4b04 100644 --- a/src/ImageGallery.types.tsx +++ b/src/ImageGallery.types.tsx @@ -4,8 +4,8 @@ export interface ImageDataType { caption?: string; cta?: { href: string; - target: string; - rel: string; + rel?: string; + target?: string; text: string; }; src: string;