feat: add config option to disable zoom (fix #2)

README.md

@@ -418,6 +418,24 @@ Type: `string`
 CSS class of the lightbox root element. You can use this class name to provide
 module-scoped style overrides.
 
+### zoom
+
+Type: `object`
+
+Zoom settings.
+
+- `disabled` - disable zoom on image slides
+- `supports` - zoom-enabled custom slide types
+
+Usage example:
+
+```tsx
+<Lightbox
+  zoom={{ supports: ["custom-slide-type"] }}
+  // ...
+/>
+```
+
 ## Custom Slide Attributes
 
 You can add custom slide attributes with the following module augmentation.

src/components/Zoom.tsx

@@ -61,7 +61,7 @@ export default function Zoom({ children }: PropsWithChildren) {
   const observer = useRef<ResizeObserver>();
   const carouselRef = useRef<HTMLDivElement | null>(null);
 
-  const { index, slides, zoom: { supports } = {} } = useLightboxContext();
+  const { index, slides, zoom: { supports, disabled } = {} } = useLightboxContext();
 
   const [prevIndex, setPrevIndex] = useState(index);
   if (index !== prevIndex) {
@@ -72,7 +72,7 @@ export default function Zoom({ children }: PropsWithChildren) {
   }
 
   const slide = slides[index];
-  const maxZoom = isImageSlide(slide) || (supports || []).includes((slide as any).type) ? 8 : 1;
+  const maxZoom = (isImageSlide(slide) && !disabled) || (supports || []).includes((slide as any).type) ? 8 : 1;
 
   useLayoutEffect(() => {
     const carouselHalfWidth = (rect?.width || 0) / 2;

src/types.ts

@@ -140,6 +140,8 @@ export interface ControllerSettings {
 
 /** Zoom settings */
 export interface ZoomSettings {
+  /** disable zoom on image slides */
+  disabled?: boolean;
   /** zoom-enabled custom slide types */
   supports?: SlideTypeKey[];
 }

test/Lightbox.spec.tsx

@@ -398,6 +398,15 @@ describe("Lightbox", () => {
     expectToBeZoomedOut();
   });
 
+  it("supports disabling zoom", async () => {
+    const user = userEvent.setup();
+
+    renderLightbox({ zoom: { disabled: true } });
+
+    await user.dblClick(getController());
+    expectToBeZoomedOut();
+  });
+
   it("supports zoom on custom slides", () => {
     let maxZoom: number | undefined;