react-pic-gallery 1.5.6 → 1.5.10
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 +15 -7
- package/dist/react-pic-gallery.es.js +1412 -1183
- package/dist/react-pic-gallery.umd.js +11 -7
- package/package.json +49 -41
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@ React library for a simple image gallery with lightbox implemented.
|
|
|
11
11
|
- 📱 Responsive
|
|
12
12
|
- 🚵 Lazy load on pictures
|
|
13
13
|
- ✏ Buttons and CSS customization classes are accessible
|
|
14
|
-
- 💡 Lightbox implemented
|
|
14
|
+
- 💡 Lightbox implemented with pinch zoom by [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch)
|
|
15
15
|
|
|
16
16
|
## Demo
|
|
17
17
|
|
|
@@ -25,15 +25,21 @@ https://marcelrsoub.github.io/react-pic-gallery/
|
|
|
25
25
|
npm install --save react-pic-gallery
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
+
or with yarn:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
yarn add react-pic-gallery
|
|
32
|
+
```
|
|
33
|
+
|
|
28
34
|
## Usage
|
|
29
35
|
|
|
30
36
|
A list of objects containing a thumbnail source and the full source is the only needed parameter.
|
|
31
37
|
|
|
32
|
-
```
|
|
38
|
+
```jsx
|
|
33
39
|
import React from 'react'
|
|
34
|
-
import PicGallery
|
|
40
|
+
import PicGallery from 'react-pic-gallery'
|
|
35
41
|
|
|
36
|
-
const listOfImages
|
|
42
|
+
const listOfImages = [
|
|
37
43
|
{
|
|
38
44
|
thumbnailSrc: 'https://picsum.photos/id/237/200/300',
|
|
39
45
|
fullSrc: 'https://picsum.photos/id/237/800/600'
|
|
@@ -61,9 +67,9 @@ The options interface can be imported from the library and the object can be pas
|
|
|
61
67
|
|
|
62
68
|
```tsx
|
|
63
69
|
import React from 'react'
|
|
64
|
-
import PicGallery
|
|
70
|
+
import PicGallery from 'react-pic-gallery'
|
|
65
71
|
|
|
66
|
-
const listOfImages
|
|
72
|
+
const listOfImages = [
|
|
67
73
|
{
|
|
68
74
|
thumbnailSrc: 'https://picsum.photos/id/237/200/300',
|
|
69
75
|
fullSrc: 'https://picsum.photos/id/237/800/600',
|
|
@@ -75,10 +81,12 @@ const listOfImages: imageObject[] = [
|
|
|
75
81
|
}
|
|
76
82
|
]
|
|
77
83
|
|
|
78
|
-
const options
|
|
84
|
+
const options = {
|
|
79
85
|
// customLoadComponent: () => <h3>Loading</h3>
|
|
80
86
|
// hidePagination: false,
|
|
81
87
|
// externalLightbox: true,
|
|
88
|
+
// rowHeight: '100px',
|
|
89
|
+
// picsPerRow:3
|
|
82
90
|
}
|
|
83
91
|
|
|
84
92
|
const App = () => {
|