yet-another-react-lightbox 1.9.4 → 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.
- package/README.md +51 -49
- package/dist/plugins/Inline.d.ts +1 -1
- package/dist/plugins/captions.css +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,6 +20,8 @@ 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
|
+
|
|
24
|
+
|
|
23
25
|
## Documentation
|
|
24
26
|
|
|
25
27
|
[https://yet-another-react-lightbox.com/documentation](https://yet-another-react-lightbox.com/documentation)
|
|
@@ -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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
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,36 +87,36 @@ import Lightbox from "yet-another-react-lightbox";
|
|
|
85
87
|
import "yet-another-react-lightbox/styles.css";
|
|
86
88
|
|
|
87
89
|
const App = () => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
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;
|
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
|
|
5
|
+
/** HTML div element attributes to be passed to the Inline plugin container */
|
|
6
6
|
inline?: React.HTMLAttributes<HTMLDivElement>;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
@@ -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
|
}
|