yet-another-react-lightbox 1.9.2 → 1.9.5

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.
Files changed (8) hide show
  1. package/README.md +61 -59
  2. package/dist/core/components/ImageSlide.js +3 -3
  3. package/dist/core/utils.d.ts +0 -1
  4. package/dist/core/utils.js +0 -1
  5. package/dist/plugins/Inline.d.ts +1 -1
  6. package/dist/plugins/Zoom.js +10 -10
  7. package/dist/plugins/captions.css +4 -0
  8. package/package.json +4 -4
package/README.md CHANGED
@@ -20,13 +20,15 @@ Modern React lightbox component. Performant, easy to use, customizable and exten
20
20
  - **TypeScript:** type definitions come built-in in the package
21
21
  - **RTL:** compatible with RTL layout
22
22
 
23
+ ![Yet Another React Lightbox | Example](https://yet-another-react-lightbox.com/images/example.jpg)
24
+
23
25
  ## Documentation
24
26
 
25
- [https://yet-another-react-lightbox.vercel.app/documentation](https://yet-another-react-lightbox.vercel.app/documentation)
27
+ [https://yet-another-react-lightbox.com/documentation](https://yet-another-react-lightbox.com/documentation)
26
28
 
27
29
  ## Examples
28
30
 
29
- [https://yet-another-react-lightbox.vercel.app/examples](https://yet-another-react-lightbox.vercel.app/examples)
31
+ [https://yet-another-react-lightbox.com/examples](https://yet-another-react-lightbox.com/examples)
30
32
 
31
33
  ## Installation
32
34
 
@@ -48,25 +50,25 @@ import Lightbox from "yet-another-react-lightbox";
48
50
  import "yet-another-react-lightbox/styles.css";
49
51
 
50
52
  const App = () => {
51
- const [open, setOpen] = React.useState(false);
52
-
53
- return (
54
- <>
55
- <button type="button" onClick={() => setOpen(true)}>
56
- Open Lightbox
57
- </button>
58
-
59
- <Lightbox
60
- open={open}
61
- close={() => setOpen(false)}
62
- slides={[
63
- { src: "/image1.jpg" },
64
- { src: "/image2.jpg" },
65
- { src: "/image3.jpg" },
66
- ]}
67
- />
68
- </>
69
- );
53
+ const [open, setOpen] = React.useState(false);
54
+
55
+ return (
56
+ <>
57
+ <button type="button" onClick={() => setOpen(true)}>
58
+ Open Lightbox
59
+ </button>
60
+
61
+ <Lightbox
62
+ open={open}
63
+ close={() => setOpen(false)}
64
+ slides={[
65
+ { src: "/image1.jpg" },
66
+ { src: "/image2.jpg" },
67
+ { src: "/image3.jpg" },
68
+ ]}
69
+ />
70
+ </>
71
+ );
70
72
  };
71
73
 
72
74
  export default App;
@@ -85,43 +87,43 @@ import Lightbox from "yet-another-react-lightbox";
85
87
  import "yet-another-react-lightbox/styles.css";
86
88
 
87
89
  const App = () => {
88
- const [open, setOpen] = React.useState(false);
89
-
90
- return (
91
- <>
92
- <button type="button" onClick={() => setOpen(true)}>
93
- Open Lightbox
94
- </button>
95
-
96
- <Lightbox
97
- open={open}
98
- close={() => setOpen(false)}
99
- slides={[
100
- {
101
- src: "/image1x3840.jpg",
102
- alt: "image 1",
103
- width: 3840,
104
- height: 2560,
105
- srcSet: [
106
- { src: "/image1x320.jpg", width: 320, height: 213 },
107
- { src: "/image1x640.jpg", width: 640, height: 427 },
108
- { src: "/image1x1200.jpg", width: 1200, height: 800 },
109
- { src: "/image1x2048.jpg", width: 2048, height: 1365 },
110
- { src: "/image1x3840.jpg", width: 3840, height: 2560 },
111
- ]
112
- },
113
- // ...
114
- ]}
115
- />
116
- </>
117
- );
90
+ const [open, setOpen] = React.useState(false);
91
+
92
+ return (
93
+ <>
94
+ <button type="button" onClick={() => setOpen(true)}>
95
+ Open Lightbox
96
+ </button>
97
+
98
+ <Lightbox
99
+ open={open}
100
+ close={() => setOpen(false)}
101
+ slides={[
102
+ {
103
+ src: "/image1x3840.jpg",
104
+ alt: "image 1",
105
+ width: 3840,
106
+ height: 2560,
107
+ srcSet: [
108
+ { src: "/image1x320.jpg", width: 320, height: 213 },
109
+ { src: "/image1x640.jpg", width: 640, height: 427 },
110
+ { src: "/image1x1200.jpg", width: 1200, height: 800 },
111
+ { src: "/image1x2048.jpg", width: 2048, height: 1365 },
112
+ { src: "/image1x3840.jpg", width: 3840, height: 2560 },
113
+ ]
114
+ },
115
+ // ...
116
+ ]}
117
+ />
118
+ </>
119
+ );
118
120
  };
119
121
 
120
122
  export default App;
121
123
  ```
122
124
 
123
125
  You can also integrate 3rd-party image components (e.g., Next.js Image or Gatsby Image) via a custom render function.
124
- See [examples](https://yet-another-react-lightbox.vercel.app/examples) on the documentation website.
126
+ See [examples](https://yet-another-react-lightbox.com/examples) on the documentation website.
125
127
 
126
128
  ## Plugins
127
129
 
@@ -129,14 +131,14 @@ Yet Another React Lightbox allows you to add optional features based on your req
129
131
 
130
132
  The following plugins come bundled in the package:
131
133
 
132
- - [Captions](https://yet-another-react-lightbox.vercel.app/plugins/captions) - adds support for slide title and
134
+ - [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
133
135
  description
134
- - [Fullscreen](https://yet-another-react-lightbox.vercel.app/plugins/fullscreen) - adds support for fullscreen mode
135
- - [Inline](https://yet-another-react-lightbox.vercel.app/plugins/inline) - adds support for inline rendering mode
136
- - [Slideshow](https://yet-another-react-lightbox.vercel.app/plugins/slideshow) - adds slideshow autoplay feature
137
- - [Thumbnails](https://yet-another-react-lightbox.vercel.app/plugins/thumbnails) - adds thumbnails track
138
- - [Video](https://yet-another-react-lightbox.vercel.app/plugins/video) - adds support for video slides
139
- - [Zoom](https://yet-another-react-lightbox.vercel.app/plugins/zoom) - adds image zoom feature
136
+ - [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
137
+ - [Inline](https://yet-another-react-lightbox.com/plugins/inline) - adds support for inline rendering mode
138
+ - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow autoplay feature
139
+ - [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds thumbnails track
140
+ - [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support for video slides
141
+ - [Zoom](https://yet-another-react-lightbox.com/plugins/zoom) - adds image zoom feature
140
142
 
141
143
  ## License
142
144
 
package/dist/core/components/ImageSlide.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { adjustDevicePixelRatio, clsx, cssClass, hasWindow } from "../utils.js";
2
+ import { clsx, cssClass, hasWindow } from "../utils.js";
3
3
  import { useLatest } from "../hooks/index.js";
4
4
  import { useEvents } from "../contexts/index.js";
5
5
  import { ErrorIcon, LoadingIcon } from "./Icons.js";
@@ -42,8 +42,8 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit }) =>
42
42
  }, []);
43
43
  const cover = image.imageFit === "cover" || (image.imageFit !== "contain" && imageFit === "cover");
44
44
  const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
45
- const maxWidth = adjustDevicePixelRatio(nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0));
46
- const maxHeight = adjustDevicePixelRatio(nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height).filter((x) => Boolean(x))) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), (image.aspectRatio && maxWidth ? maxWidth / image.aspectRatio : (_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0));
45
+ const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
46
+ const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height).filter((x) => Boolean(x))) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), (image.aspectRatio && maxWidth ? maxWidth / image.aspectRatio : (_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
47
47
  const style = maxWidth && maxHeight ? { maxWidth, maxHeight } : undefined;
48
48
  const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
49
49
  const estimateActualWidth = () => {
package/dist/core/utils.d.ts CHANGED
@@ -8,5 +8,4 @@ export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
8
8
  export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => T;
9
9
  export declare const hasWindow: () => boolean;
10
10
  export declare const isDefined: <T = any>(x: T | undefined) => x is T;
11
- export declare const adjustDevicePixelRatio: (value: number) => number;
12
11
  export declare const round: (value: number, decimals?: number) => number;
package/dist/core/utils.js CHANGED
@@ -18,7 +18,6 @@ export const makeUseContext = (name, contextName, context) => () => {
18
18
  };
19
19
  export const hasWindow = () => typeof window !== "undefined";
20
20
  export const isDefined = (x) => typeof x !== "undefined";
21
- export const adjustDevicePixelRatio = (value) => hasWindow() ? Math.round(value / (window.devicePixelRatio || 1)) : value;
22
21
  export const round = (value, decimals = 0) => {
23
22
  const factor = 10 ** decimals;
24
23
  return Math.round((value + Number.EPSILON) * factor) / factor;
package/dist/plugins/Inline.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { Component, Plugin } from "../types.js";
3
3
  declare module "../types.js" {
4
4
  interface LightboxProps {
5
- /** HTML div element attributes to be passed to the inline plugin container */
5
+ /** HTML div element attributes to be passed to the Inline plugin container */
6
6
  inline?: React.HTMLAttributes<HTMLDivElement>;
7
7
  }
8
8
  }
package/dist/plugins/Zoom.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import { adjustDevicePixelRatio, cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
2
+ import { cleanup, clsx, createIcon, createModule, cssClass, IconButton, ImageSlide, label, makeUseContext, round, useContainerRect, useController, useEnhancedEffect, useEvents, useMotionPreference, } from "../core/index.js";
3
3
  const defaultZoomProps = {
4
4
  maxZoomPixelRatio: 1,
5
5
  zoomInMultiplier: 2,
@@ -106,8 +106,8 @@ const getSlideRects = (slide, cover, maxZoomPixelRatio, rect) => {
106
106
  }
107
107
  : { width, height };
108
108
  maxSlideRect = {
109
- width: adjustDevicePixelRatio(maxSlideRect.width) * maxZoomPixelRatio,
110
- height: adjustDevicePixelRatio(maxSlideRect.height) * maxZoomPixelRatio,
109
+ width: maxSlideRect.width * maxZoomPixelRatio,
110
+ height: maxSlideRect.height * maxZoomPixelRatio,
111
111
  };
112
112
  slideRect = cover
113
113
  ? {
@@ -221,17 +221,17 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
221
221
  }, [offset]);
222
222
  useEnhancedEffect(() => {
223
223
  if (offset === 0) {
224
- const { setMinZoom, setMaxZoom, maxZoom } = refs.current;
224
+ const { setMinZoom, setMaxZoom } = refs.current;
225
225
  setMinZoom(state.zoom <= 1);
226
- setMaxZoom(state.zoom >= maxZoom);
226
+ setMaxZoom(state.zoom >= currentMaxZoom);
227
227
  }
228
- }, [offset, state.zoom]);
228
+ }, [offset, state.zoom, currentMaxZoom]);
229
229
  const changeZoom = React.useCallback((value, rapid, dx, dy) => {
230
230
  const { current } = refs;
231
231
  const { state: { zoom }, containerRef, containerRect, maxZoom, } = current;
232
232
  if (!containerRef.current || !containerRect)
233
233
  return;
234
- const newZoom = round(Math.min(Math.max(value, 1), maxZoom), 5);
234
+ const newZoom = round(Math.min(Math.max(value + 0.001 < maxZoom ? value : maxZoom, 1), maxZoom), 5);
235
235
  if (newZoom === zoom)
236
236
  return;
237
237
  if (!rapid) {
@@ -379,7 +379,7 @@ const ZoomContainer = ({ slide, offset, rect, render, carousel, animation, zoom:
379
379
  ? { style: { transform: `scale(${zoom}) translate3d(${offsetX}px, ${offsetY}px, 0)` } }
380
380
  : null) }, rendered)) : null;
381
381
  };
382
- const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
382
+ const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation, zoom }) => {
383
383
  var _a;
384
384
  const { setZoomSupported } = useZoom();
385
385
  const imageSlide = !("type" in slide);
@@ -390,7 +390,7 @@ const ZoomWrapper = ({ slide, offset, rect, render, carousel, animation }) => {
390
390
  }
391
391
  }, [offset, zoomSupported, setZoomSupported]);
392
392
  if (zoomSupported) {
393
- return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation }));
393
+ return (React.createElement(ZoomContainer, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom }));
394
394
  }
395
395
  const rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, slide, offset, rect);
396
396
  if (rendered) {
@@ -410,7 +410,7 @@ export const Zoom = ({ augment, append }) => {
410
410
  },
411
411
  render: {
412
412
  ...render,
413
- slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation })),
413
+ slide: (slide, offset, rect) => (React.createElement(ZoomWrapper, { slide: slide, offset: offset, rect: rect, render: render, carousel: carousel, animation: animation, zoom: zoom })),
414
414
  },
415
415
  zoom: {
416
416
  ...defaultZoomProps,
package/dist/plugins/captions.css CHANGED
@@ -14,6 +14,8 @@
14
14
  top: 0;
15
15
  padding: 16px;
16
16
  background: rgba(0, 0, 0, 0.5);
17
+ -webkit-transform: translateZ(0);
18
+ transform: translateZ(0);
17
19
  }
18
20
  .yarl__slide_description {
19
21
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
@@ -35,4 +37,6 @@
35
37
  bottom: 0;
36
38
  padding: 16px;
37
39
  background: rgba(0, 0, 0, 0.5);
40
+ -webkit-transform: translateZ(0);
41
+ transform: translateZ(0);
38
42
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yet-another-react-lightbox",
3
- "version": "1.9.2",
3
+ "version": "1.9.5",
4
4
  "description": "Modern React lightbox component",
5
5
  "author": "Igor Danchenko",
6
6
  "license": "MIT",
@@ -60,7 +60,7 @@
60
60
  "dist"
61
61
  ],
62
62
  "sideEffects": false,
63
- "homepage": "https://yet-another-react-lightbox.vercel.app/",
63
+ "homepage": "https://yet-another-react-lightbox.com",
64
64
  "repository": {
65
65
  "type": "git",
66
66
  "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
@@ -107,7 +107,7 @@
107
107
  "eslint-config-prettier": "^8.5.0",
108
108
  "eslint-plugin-import": "^2.26.0",
109
109
  "eslint-plugin-jsx-a11y": "^6.6.0",
110
- "eslint-plugin-prettier": "^4.1.0",
110
+ "eslint-plugin-prettier": "^4.2.1",
111
111
  "eslint-plugin-react": "^7.30.1",
112
112
  "eslint-plugin-react-hooks": "^4.6.0",
113
113
  "husky": "^8.0.1",
@@ -116,7 +116,7 @@
116
116
  "lint-staged": "^13.0.3",
117
117
  "npm-run-all": "^4.1.5",
118
118
  "postcss": "^8.4.14",
119
- "postcss-cli": "^9.1.0",
119
+ "postcss-cli": "^10.0.0",
120
120
  "prettier": "^2.7.1",
121
121
  "react": "^18.2.0",
122
122
  "react-dom": "^18.2.0",