react-pic-gallery 1.3.8 → 1.5.2
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 +26 -21
- package/dist/react-pic-gallery.es.js +2013 -0
- package/dist/react-pic-gallery.umd.js +67 -0
- package/package.json +37 -47
- package/dist/CircularLoading.d.ts +0 -1
- package/dist/ImgLazyLoading.d.ts +0 -7
- package/dist/ImgLightbox.d.ts +0 -10
- package/dist/example/src/setupTests.d.ts +0 -1
- package/dist/index.d.ts +0 -27
- package/dist/index.modern.js +0 -341
- package/dist/index.modern.js.map +0 -1
- package/dist/src/index.d.ts +0 -26
- package/dist/styles.d.ts +0 -75
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# react-pic-gallery
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
>
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/react-pic-gallery)
|
|
6
6
|
|
|
@@ -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
|
|
15
15
|
|
|
16
16
|
## Demo
|
|
17
17
|
|
|
@@ -33,9 +33,15 @@ A list of objects containing a thumbnail source and the full source is the only
|
|
|
33
33
|
import React from 'react'
|
|
34
34
|
import PicGallery, { imageObject } from 'react-pic-gallery'
|
|
35
35
|
|
|
36
|
-
const listOfImages:imageObject[]=[
|
|
37
|
-
{
|
|
38
|
-
|
|
36
|
+
const listOfImages: imageObject[] = [
|
|
37
|
+
{
|
|
38
|
+
thumbnailSrc: 'https://picsum.photos/id/237/200/300',
|
|
39
|
+
fullSrc: 'https://picsum.photos/id/237/800/600'
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
thumbnailSrc: 'https://picsum.photos/id/154/200/150',
|
|
43
|
+
fullSrc: 'https://picsum.photos/id/154/200/150'
|
|
44
|
+
}
|
|
39
45
|
]
|
|
40
46
|
|
|
41
47
|
const App = () => {
|
|
@@ -57,29 +63,28 @@ The options interface can be imported from the library and the object can be pas
|
|
|
57
63
|
import React from 'react'
|
|
58
64
|
import PicGallery, { imageObject, Options } from 'react-pic-gallery'
|
|
59
65
|
|
|
60
|
-
const listOfImages:imageObject[]=[
|
|
61
|
-
{
|
|
62
|
-
|
|
66
|
+
const listOfImages: imageObject[] = [
|
|
67
|
+
{
|
|
68
|
+
thumbnailSrc: 'https://picsum.photos/id/237/200/300',
|
|
69
|
+
fullSrc: 'https://picsum.photos/id/237/800/600',
|
|
70
|
+
description: 'A Dog standing on a wooden floor'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
thumbnailSrc: 'https://picsum.photos/id/154/200/150',
|
|
74
|
+
fullSrc: 'https://picsum.photos/id/154/200/150'
|
|
75
|
+
}
|
|
63
76
|
]
|
|
64
77
|
|
|
65
|
-
const
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
return <div style={{background:'red'}}>{props.children}</div>
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
const optionsObj:Options = {
|
|
73
|
-
downloadBtnDisplay:true,
|
|
74
|
-
downloadCustomBtn:DownBtn,
|
|
75
|
-
descriptionBoxDisplay:true,
|
|
76
|
-
descriptionCustomBox:DescBox
|
|
78
|
+
const options: Options = {
|
|
79
|
+
// customLoadComponent: () => <h3>Loading</h3>
|
|
80
|
+
// hidePagination: false,
|
|
81
|
+
// externalLightbox: true,
|
|
77
82
|
}
|
|
78
83
|
|
|
79
84
|
const App = () => {
|
|
80
85
|
return (
|
|
81
86
|
<div>
|
|
82
|
-
<PicGallery imgList={listOfImages} options={
|
|
87
|
+
<PicGallery imgList={listOfImages} options={options} />
|
|
83
88
|
</div>
|
|
84
89
|
)
|
|
85
90
|
}
|