yet-another-react-lightbox 1.9.3 → 1.9.6

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 +3 -3
  7. package/dist/plugins/captions.css +4 -0
  8. package/package.json +8 -6
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
  ? {
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.3",
3
+ "version": "1.9.6",
4
4
  "description": "Modern React lightbox component",
5
5
  "author": "Igor Danchenko",
6
6
  "license": "MIT",
@@ -59,8 +59,10 @@
59
59
  "files": [
60
60
  "dist"
61
61
  ],
62
- "sideEffects": false,
63
- "homepage": "https://yet-another-react-lightbox.vercel.app/",
62
+ "sideEffects": [
63
+ "*.css"
64
+ ],
65
+ "homepage": "https://yet-another-react-lightbox.com",
64
66
  "repository": {
65
67
  "type": "git",
66
68
  "url": "https://github.com/igordanchenko/yet-another-react-lightbox.git"
@@ -91,7 +93,7 @@
91
93
  "@commitlint/cli": "^17.0.3",
92
94
  "@commitlint/config-conventional": "^17.0.3",
93
95
  "@semantic-release/changelog": "^6.0.1",
94
- "@semantic-release/github": "^8.0.4",
96
+ "@semantic-release/github": "^8.0.5",
95
97
  "@testing-library/jest-dom": "^5.16.4",
96
98
  "@testing-library/react": "^13.3.0",
97
99
  "@testing-library/user-event": "^14.2.1",
@@ -107,7 +109,7 @@
107
109
  "eslint-config-prettier": "^8.5.0",
108
110
  "eslint-plugin-import": "^2.26.0",
109
111
  "eslint-plugin-jsx-a11y": "^6.6.0",
110
- "eslint-plugin-prettier": "^4.1.0",
112
+ "eslint-plugin-prettier": "^4.2.1",
111
113
  "eslint-plugin-react": "^7.30.1",
112
114
  "eslint-plugin-react-hooks": "^4.6.0",
113
115
  "husky": "^8.0.1",
@@ -116,7 +118,7 @@
116
118
  "lint-staged": "^13.0.3",
117
119
  "npm-run-all": "^4.1.5",
118
120
  "postcss": "^8.4.14",
119
- "postcss-cli": "^9.1.0",
121
+ "postcss-cli": "^10.0.0",
120
122
  "prettier": "^2.7.1",
121
123
  "react": "^18.2.0",
122
124
  "react-dom": "^18.2.0",