react-image-gallery 2.0.5 → 2.0.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.
- package/README.md +143 -222
- package/build/types/types.d.ts +3 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -1,196 +1,181 @@
|
|
|
1
1
|
# React Image Gallery
|
|
2
2
|
|
|
3
|
+
**A responsive, customizable image gallery component for React**
|
|
4
|
+
|
|
5
|
+
<br />
|
|
6
|
+
|
|
3
7
|
[](https://badge.fury.io/js/react-image-gallery)
|
|
4
8
|
[](https://www.npmjs.com/package/react-image-gallery)
|
|
5
9
|
[](https://bundlephobia.com/package/react-image-gallery)
|
|
10
|
+
[](https://github.com/xiaolin/react-image-gallery/actions/workflows/ci.yml)
|
|
11
|
+
[](https://www.typescriptlang.org/)
|
|
12
|
+
[](https://opensource.org/licenses/MIT)
|
|
13
|
+
|
|
14
|
+
<br />
|
|
6
15
|
|
|
7
|
-
|
|
16
|
+
**[🚀 View Live Demo](http://linxtion.com/demo/react-image-gallery)**
|
|
8
17
|
|
|
9
|
-
|
|
18
|
+
<br />
|
|
10
19
|
|
|
11
|
-
|
|
12
21
|
|
|
13
|
-
|
|
22
|
+
<br />
|
|
14
23
|
|
|
15
|
-
## Features
|
|
24
|
+
## ✨ Features
|
|
16
25
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
26
|
+
| Feature | Description |
|
|
27
|
+
| -------------------- | --------------------------------------------------------- |
|
|
28
|
+
| 📱 **Mobile Swipe** | Native touch gestures for smooth mobile navigation |
|
|
29
|
+
| 🖼️ **Thumbnails** | Customizable thumbnail navigation with multiple positions |
|
|
30
|
+
| 📺 **Fullscreen** | Browser fullscreen or CSS-based fullscreen modes |
|
|
31
|
+
| 🎨 **Theming** | CSS custom properties for easy styling |
|
|
32
|
+
| ⌨️ **Keyboard Nav** | Arrow keys, escape, and custom key bindings |
|
|
33
|
+
| 🔄 **RTL Support** | Right-to-left language support |
|
|
34
|
+
| ↕️ **Vertical Mode** | Slide vertically instead of horizontally |
|
|
35
|
+
| 🎬 **Custom Slides** | Render videos, iframes, or any custom content |
|
|
25
36
|
|
|
26
|
-
|
|
37
|
+
<br />
|
|
27
38
|
|
|
28
|
-
|
|
39
|
+
## 🚀 Getting Started
|
|
29
40
|
|
|
30
41
|
```
|
|
31
42
|
npm install react-image-gallery
|
|
32
43
|
```
|
|
33
44
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
Styles are automatically injected when you import the component. No separate CSS import required!
|
|
37
|
-
|
|
38
|
-
```js
|
|
45
|
+
```jsx
|
|
39
46
|
import ImageGallery from "react-image-gallery";
|
|
40
47
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
```js
|
|
54
|
-
// JS import (using webpack or similar bundler)
|
|
55
|
-
import "react-image-gallery/styles/image-gallery.css";
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Note: If you import the CSS manually, it will be detected and auto-injection will be skipped.
|
|
59
|
-
|
|
60
|
-
### Theming with CSS Custom Properties
|
|
61
|
-
|
|
62
|
-
Customize the gallery appearance by overriding CSS custom properties:
|
|
48
|
+
const images = [
|
|
49
|
+
{
|
|
50
|
+
original: "https://picsum.photos/id/1018/1000/600/",
|
|
51
|
+
thumbnail: "https://picsum.photos/id/1018/250/150/",
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
original: "https://picsum.photos/id/1015/1000/600/",
|
|
55
|
+
thumbnail: "https://picsum.photos/id/1015/250/150/",
|
|
56
|
+
},
|
|
57
|
+
];
|
|
63
58
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
.image-gallery {
|
|
67
|
-
--ig-primary-color: #ff6b6b; /* Primary/accent color */
|
|
68
|
-
--ig-white: #ffffff; /* Icon and text color */
|
|
69
|
-
--ig-black: #000000; /* Background color in fullscreen */
|
|
70
|
-
--ig-background-overlay: rgba(0, 0, 0, 0.5); /* Overlay background */
|
|
71
|
-
--ig-thumbnail-size: 120px; /* Thumbnail dimensions */
|
|
72
|
-
--ig-thumbnail-border-width: 3px; /* Thumbnail border width */
|
|
59
|
+
function MyGallery() {
|
|
60
|
+
return <ImageGallery items={images} />;
|
|
73
61
|
}
|
|
74
62
|
```
|
|
75
63
|
|
|
76
|
-
|
|
64
|
+
For more examples, see [`example/App.jsx`](https://github.com/xiaolin/react-image-gallery/blob/master/example/App.jsx)
|
|
77
65
|
|
|
78
|
-
|
|
79
|
-
:root {
|
|
80
|
-
--ig-primary-color: #e91e63;
|
|
81
|
-
}
|
|
82
|
-
```
|
|
66
|
+
<br />
|
|
83
67
|
|
|
84
|
-
|
|
68
|
+
## 📘 TypeScript
|
|
85
69
|
|
|
86
|
-
|
|
70
|
+
This package includes TypeScript definitions. Import types for props, items, and refs:
|
|
87
71
|
|
|
88
|
-
```
|
|
72
|
+
```tsx
|
|
89
73
|
import ImageGallery from "react-image-gallery";
|
|
74
|
+
import type {
|
|
75
|
+
GalleryItem,
|
|
76
|
+
ImageGalleryProps,
|
|
77
|
+
ImageGalleryRef,
|
|
78
|
+
} from "react-image-gallery";
|
|
90
79
|
|
|
91
|
-
const images = [
|
|
80
|
+
const images: GalleryItem[] = [
|
|
92
81
|
{
|
|
93
82
|
original: "https://picsum.photos/id/1018/1000/600/",
|
|
94
83
|
thumbnail: "https://picsum.photos/id/1018/250/150/",
|
|
84
|
+
originalAlt: "Mountain landscape",
|
|
85
|
+
description: "A beautiful mountain view",
|
|
95
86
|
},
|
|
96
87
|
{
|
|
97
88
|
original: "https://picsum.photos/id/1015/1000/600/",
|
|
98
89
|
thumbnail: "https://picsum.photos/id/1015/250/150/",
|
|
90
|
+
originalAlt: "Flowing river",
|
|
99
91
|
},
|
|
100
92
|
{
|
|
101
93
|
original: "https://picsum.photos/id/1019/1000/600/",
|
|
102
94
|
thumbnail: "https://picsum.photos/id/1019/250/150/",
|
|
95
|
+
originalAlt: "Sunset over the ocean",
|
|
103
96
|
},
|
|
104
97
|
];
|
|
105
98
|
|
|
106
99
|
function MyGallery() {
|
|
107
|
-
|
|
100
|
+
const galleryRef = useRef<ImageGalleryRef>(null);
|
|
101
|
+
|
|
102
|
+
const handleClick = () => {
|
|
103
|
+
galleryRef.current?.fullScreen();
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
return (
|
|
107
|
+
<>
|
|
108
|
+
<ImageGallery ref={galleryRef} items={images} />
|
|
109
|
+
<button onClick={handleClick}>Enter Fullscreen</button>
|
|
110
|
+
</>
|
|
111
|
+
);
|
|
108
112
|
}
|
|
109
113
|
```
|
|
110
114
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
- `
|
|
138
|
-
|
|
115
|
+
<br />
|
|
116
|
+
|
|
117
|
+
## ⚙️ Props
|
|
118
|
+
|
|
119
|
+
- `items`: (required) Array of objects. Available properties:
|
|
120
|
+
- `original` - image source URL
|
|
121
|
+
- `thumbnail` - thumbnail source URL
|
|
122
|
+
- `fullscreen` - fullscreen image URL (defaults to original)
|
|
123
|
+
- `originalHeight` - image height (html5 attribute)
|
|
124
|
+
- `originalWidth` - image width (html5 attribute)
|
|
125
|
+
- `loading` - "lazy" or "eager" (HTML5 attribute)
|
|
126
|
+
- `thumbnailHeight` - image height (html5 attribute)
|
|
127
|
+
- `thumbnailWidth` - image width (html5 attribute)
|
|
128
|
+
- `thumbnailLoading` - "lazy" or "eager" (HTML5 attribute)
|
|
129
|
+
- `originalClass` - custom image class
|
|
130
|
+
- `thumbnailClass` - custom thumbnail class
|
|
131
|
+
- `renderItem` - Function for custom rendering a specific slide (see renderItem below)
|
|
132
|
+
- `renderThumbInner` - Function for custom thumbnail renderer (see renderThumbInner below)
|
|
133
|
+
- `originalAlt` - image alt
|
|
134
|
+
- `thumbnailAlt` - thumbnail image alt
|
|
135
|
+
- `originalTitle` - image title
|
|
136
|
+
- `thumbnailTitle` - thumbnail image title
|
|
137
|
+
- `thumbnailLabel` - label for thumbnail
|
|
138
|
+
- `description` - description for image
|
|
139
|
+
- `srcSet` - image srcset (html5 attribute)
|
|
140
|
+
- `sizes` - image sizes (html5 attribute)
|
|
141
|
+
- `bulletClass` - extra class for the bullet of the item
|
|
142
|
+
- `infinite`: Boolean, default `true` - loop infinitely
|
|
139
143
|
- `lazyLoad`: Boolean, default `false`
|
|
140
144
|
- `showNav`: Boolean, default `true`
|
|
141
145
|
- `showThumbnails`: Boolean, default `true`
|
|
142
|
-
- `thumbnailPosition`: String, default `bottom`
|
|
143
|
-
- available positions: `top, right, bottom, left`
|
|
146
|
+
- `thumbnailPosition`: String, default `bottom` - options: `top`, `right`, `bottom`, `left`
|
|
144
147
|
- `showFullscreenButton`: Boolean, default `true`
|
|
145
|
-
- `useBrowserFullscreen`: Boolean, default `true`
|
|
146
|
-
|
|
147
|
-
- `useTranslate3D`: Boolean, default `true`
|
|
148
|
-
- if false, will use `translate` instead of `translate3d` css property to transition slides
|
|
148
|
+
- `useBrowserFullscreen`: Boolean, default `true` - if false, uses CSS-based fullscreen
|
|
149
|
+
- `useTranslate3D`: Boolean, default `true` - if false, uses `translate` instead of `translate3d`
|
|
149
150
|
- `showPlayButton`: Boolean, default `true`
|
|
150
|
-
- `isRTL`: Boolean, default `false`
|
|
151
|
-
- if true, gallery's direction will be from right-to-left (to support right-to-left languages)
|
|
151
|
+
- `isRTL`: Boolean, default `false` - right-to-left mode
|
|
152
152
|
- `showBullets`: Boolean, default `false`
|
|
153
|
-
- `maxBullets`: Number, default `undefined`
|
|
154
|
-
- Maximum number of bullets to show at once. Active bullet stays centered while bullets slide. Minimum value is 3.
|
|
153
|
+
- `maxBullets`: Number, default `undefined` - max bullets shown (minimum 3, active bullet stays centered)
|
|
155
154
|
- `showIndex`: Boolean, default `false`
|
|
156
155
|
- `autoPlay`: Boolean, default `false`
|
|
157
|
-
- `disableThumbnailScroll`: Boolean, default `false`
|
|
158
|
-
|
|
159
|
-
- `disableKeyDown`: Boolean, default `false`
|
|
160
|
-
- disables keydown listener for keyboard shortcuts (left arrow, right arrow, esc key)
|
|
156
|
+
- `disableThumbnailScroll`: Boolean, default `false` - disable thumbnail auto-scroll
|
|
157
|
+
- `disableKeyDown`: Boolean, default `false` - disable keyboard navigation
|
|
161
158
|
- `disableSwipe`: Boolean, default `false`
|
|
162
159
|
- `disableThumbnailSwipe`: Boolean, default `false`
|
|
163
|
-
- `onErrorImageURL`: String, default `undefined`
|
|
164
|
-
- an image src pointing to your default image if an image fails to load
|
|
165
|
-
- handles both slide image, and thumbnail image
|
|
160
|
+
- `onErrorImageURL`: String, default `undefined` - fallback image URL for failed loads
|
|
166
161
|
- `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
|
|
167
|
-
- `slideDuration`: Number, default `550`
|
|
168
|
-
|
|
169
|
-
- `swipingTransitionDuration`: Number, default `0`
|
|
170
|
-
- transition duration while swiping in milliseconds
|
|
162
|
+
- `slideDuration`: Number, default `550` - slide transition duration (ms)
|
|
163
|
+
- `swipingTransitionDuration`: Number, default `0` - transition duration while swiping (ms)
|
|
171
164
|
- `slideInterval`: Number, default `3000`
|
|
172
165
|
- `slideOnThumbnailOver`: Boolean, default `false`
|
|
173
|
-
- `slideVertically`: Boolean, default `false`
|
|
174
|
-
|
|
175
|
-
- `
|
|
176
|
-
|
|
177
|
-
- `swipeThreshold`: Number, default `30`
|
|
178
|
-
- A percentage of how far the offset of the current slide is swiped to trigger a slide event.
|
|
179
|
-
e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
|
|
180
|
-
- `stopPropagation`: Boolean, default `false`
|
|
181
|
-
- Automatically calls stopPropagation on all 'swipe' events.
|
|
166
|
+
- `slideVertically`: Boolean, default `false` - slide vertically instead of horizontally
|
|
167
|
+
- `flickThreshold`: Number, default `0.4` - swipe velocity threshold (lower = more sensitive)
|
|
168
|
+
- `swipeThreshold`: Number, default `30` - percentage of slide width needed to trigger navigation
|
|
169
|
+
- `stopPropagation`: Boolean, default `false` - call stopPropagation on swipe events
|
|
182
170
|
- `startIndex`: Number, default `0`
|
|
183
|
-
- `onImageError`: Function, `callback(event)`
|
|
184
|
-
|
|
185
|
-
- `onThumbnailError`: Function, `callback(event)`
|
|
186
|
-
- overrides onErrorImage
|
|
171
|
+
- `onImageError`: Function, `callback(event)` - overrides `onErrorImageURL`
|
|
172
|
+
- `onThumbnailError`: Function, `callback(event)` - overrides `onErrorImageURL`
|
|
187
173
|
- `onThumbnailClick`: Function, `callback(event, index)`
|
|
188
174
|
- `onBulletClick`: Function, `callback(event, index)`
|
|
189
175
|
- `onImageLoad`: Function, `callback(event)`
|
|
190
176
|
- `onSlide`: Function, `callback(currentIndex)`
|
|
191
177
|
- `onBeforeSlide`: Function, `callback(nextIndex)`
|
|
192
|
-
- `onScreenChange`: Function, `callback(
|
|
193
|
-
- When fullscreen is toggled a boolean is passed to the callback
|
|
178
|
+
- `onScreenChange`: Function, `callback(isFullscreen)`
|
|
194
179
|
- `onPause`: Function, `callback(currentIndex)`
|
|
195
180
|
- `onPlay`: Function, `callback(currentIndex)`
|
|
196
181
|
- `onClick`: Function, `callback(event)`
|
|
@@ -199,113 +184,47 @@ function MyGallery() {
|
|
|
199
184
|
- `onTouchStart`: Function, `callback(event) on gallery slide`
|
|
200
185
|
- `onMouseOver`: Function, `callback(event) on gallery slide`
|
|
201
186
|
- `onMouseLeave`: Function, `callback(event) on gallery slide`
|
|
202
|
-
- `additionalClass`: String,
|
|
203
|
-
|
|
204
|
-
- `
|
|
205
|
-
- Use this to render custom controls or other elements on the currently displayed image (like the fullscreen button)
|
|
206
|
-
```javascript
|
|
207
|
-
_renderCustomControls() {
|
|
208
|
-
return <a href='' className='image-gallery-custom-action' onClick={this._customAction.bind(this)}/>
|
|
209
|
-
}
|
|
210
|
-
```
|
|
211
|
-
- `renderItem`: Function, custom item rendering
|
|
212
|
-
- NOTE: Highly suggest looking into a render cache such as React.memo if you plan to override renderItem
|
|
213
|
-
- On a specific item `[{thumbnail: '...', renderItem: this.myRenderItem}]`
|
|
214
|
-
- As a prop passed into `ImageGallery` to completely override `renderItem`, see source for renderItem implementation
|
|
187
|
+
- `additionalClass`: String, additional class for the root node
|
|
188
|
+
- `renderCustomControls`: Function, render custom controls on the current slide
|
|
189
|
+
- `renderItem`: Function, custom slide rendering
|
|
215
190
|
- `renderThumbInner`: Function, custom thumbnail rendering
|
|
216
|
-
|
|
217
|
-
- On a specific item `[{thumbnail: '...', renderThumbInner: this.myRenderThumbInner}]`
|
|
218
|
-
- As a prop passed into `ImageGallery` to completely override `_renderThumbInner`, see source for reference
|
|
219
|
-
|
|
220
191
|
- `renderLeftNav`: Function, custom left nav component
|
|
221
|
-
- See [`<LeftNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/LeftNav.jsx)
|
|
222
|
-
- Use this to render a custom left nav control
|
|
223
|
-
- Args:
|
|
224
|
-
- `onClick` callback that will slide to the previous item
|
|
225
|
-
- `disabled` boolean for when the nav is disabled
|
|
226
|
-
```javascript
|
|
227
|
-
renderLeftNav: (onClick, disabled) => (
|
|
228
|
-
<LeftNav onClick={onClick} disabled={disabled} />
|
|
229
|
-
);
|
|
230
|
-
```
|
|
231
192
|
- `renderRightNav`: Function, custom right nav component
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
```
|
|
242
|
-
- `renderTopNav`: Function, custom top nav component (for vertical sliding)
|
|
243
|
-
- See [`<TopNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/TopNav.jsx)
|
|
244
|
-
- Use this to render a custom top nav control when `slideVertically` is true
|
|
245
|
-
- Args:
|
|
246
|
-
- `onClick` callback that will slide to the previous item
|
|
247
|
-
- `disabled` boolean for when the nav is disabled
|
|
248
|
-
```javascript
|
|
249
|
-
renderTopNav: (onClick, disabled) => (
|
|
250
|
-
<TopNav onClick={onClick} disabled={disabled} />
|
|
251
|
-
);
|
|
252
|
-
```
|
|
253
|
-
- `renderBottomNav`: Function, custom bottom nav component (for vertical sliding)
|
|
254
|
-
- See [`<BottomNav />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/BottomNav.jsx)
|
|
255
|
-
- Use this to render a custom bottom nav control when `slideVertically` is true
|
|
256
|
-
- Args:
|
|
257
|
-
- `onClick` callback that will slide to the next item
|
|
258
|
-
- `disabled` boolean for when the nav is disabled
|
|
259
|
-
```javascript
|
|
260
|
-
renderBottomNav: (onClick, disabled) => (
|
|
261
|
-
<BottomNav onClick={onClick} disabled={disabled} />
|
|
262
|
-
);
|
|
263
|
-
```
|
|
264
|
-
- `renderPlayPauseButton`: Function, play pause button component
|
|
265
|
-
- See [`<PlayPause />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/PlayPause.jsx)
|
|
266
|
-
- Use this to render a custom play pause button
|
|
267
|
-
- Args:
|
|
268
|
-
- `onClick` callback that will toggle play/pause
|
|
269
|
-
- `isPlaying` boolean for when gallery is playing
|
|
270
|
-
```javascript
|
|
271
|
-
renderPlayPauseButton: (onClick, isPlaying) => (
|
|
272
|
-
<PlayPause onClick={onClick} isPlaying={isPlaying} />
|
|
273
|
-
);
|
|
274
|
-
```
|
|
275
|
-
- `renderFullscreenButton`: Function, custom fullscreen button component
|
|
276
|
-
- See [`<Fullscreen />`](https://github.com/xiaolin/react-image-gallery/blob/master/src/components/controls/Fullscreen.jsx)
|
|
277
|
-
- Use this to render a custom fullscreen button
|
|
278
|
-
- Args:
|
|
279
|
-
- `onClick` callback that will toggle fullscreen
|
|
280
|
-
- `isFullscreen` argument for when fullscreen is active
|
|
281
|
-
```javascript
|
|
282
|
-
renderFullscreenButton: (onClick, isFullscreen) => (
|
|
283
|
-
<Fullscreen onClick={onClick} isFullscreen={isFullscreen} />
|
|
284
|
-
),
|
|
285
|
-
```
|
|
286
|
-
- `useWindowKeyDown`: Boolean, default `true`
|
|
287
|
-
- If `true`, listens to keydown events on window (window.addEventListener)
|
|
288
|
-
- If `false`, listens to keydown events on image gallery element (imageGalleryElement.addEventListener)
|
|
289
|
-
|
|
290
|
-
# Functions
|
|
193
|
+
- `renderTopNav`: Function, custom top nav component (vertical mode)
|
|
194
|
+
- `renderBottomNav`: Function, custom bottom nav component (vertical mode)
|
|
195
|
+
- `renderPlayPauseButton`: Function, custom play/pause button
|
|
196
|
+
- `renderFullscreenButton`: Function, custom fullscreen button
|
|
197
|
+
- `useWindowKeyDown`: Boolean, default `true` - use window or element for key events
|
|
198
|
+
|
|
199
|
+
<br />
|
|
200
|
+
|
|
201
|
+
## 🔧 Functions
|
|
291
202
|
|
|
292
203
|
The following functions can be accessed using [refs](https://reactjs.org/docs/refs-and-the-dom.html)
|
|
293
204
|
|
|
294
|
-
- `play()`:
|
|
295
|
-
- `pause()`: pauses the
|
|
296
|
-
- `
|
|
205
|
+
- `play()`: starts the slideshow
|
|
206
|
+
- `pause()`: pauses the slideshow
|
|
207
|
+
- `togglePlay()`: toggles between play and pause
|
|
208
|
+
- `fullScreen()`: enters fullscreen mode
|
|
209
|
+
- `exitFullScreen()`: exits fullscreen mode
|
|
210
|
+
- `toggleFullScreen()`: toggles fullscreen mode
|
|
297
211
|
- `slideToIndex(index)`: slides to a specific index
|
|
298
212
|
- `getCurrentIndex()`: returns the current index
|
|
299
213
|
|
|
300
|
-
|
|
214
|
+
<br />
|
|
215
|
+
|
|
216
|
+
## 🤝 Contributing
|
|
301
217
|
|
|
302
|
-
|
|
218
|
+
Pull requests should be focused on a single issue. If you're unsure whether a change is useful or involves a major modification, please open an issue first.
|
|
303
219
|
|
|
304
|
-
- Follow eslint
|
|
220
|
+
- Follow the eslint config
|
|
305
221
|
- Comment your code
|
|
306
|
-
- Write [clean](https://github.com/ryanmcdermott/clean-code-javascript) code
|
|
307
222
|
|
|
308
|
-
|
|
223
|
+
<br />
|
|
224
|
+
|
|
225
|
+
## 🛠️ Build the example locally
|
|
226
|
+
|
|
227
|
+
Requires Node.js >= 18.18
|
|
309
228
|
|
|
310
229
|
```
|
|
311
230
|
git clone https://github.com/xiaolin/react-image-gallery.git
|
|
@@ -316,6 +235,8 @@ npm start
|
|
|
316
235
|
|
|
317
236
|
Then open [`localhost:8001`](http://localhost:8001) in a browser.
|
|
318
237
|
|
|
319
|
-
|
|
238
|
+
<br />
|
|
239
|
+
|
|
240
|
+
## 📄 License
|
|
320
241
|
|
|
321
|
-
MIT
|
|
242
|
+
MIT © [Xiao Lin](https://github.com/xiaolin)
|
package/build/types/types.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, SyntheticEvent, TouchEvent } from "react";
|
|
2
|
+
import type React from "react";
|
|
2
3
|
/**
|
|
3
4
|
* Image set for responsive images
|
|
4
5
|
*/
|
|
@@ -406,3 +407,5 @@ export type SwipeDirection = "Left" | "Right" | "Up" | "Down";
|
|
|
406
407
|
export interface SVGProps {
|
|
407
408
|
strokeWidth?: number;
|
|
408
409
|
}
|
|
410
|
+
declare const ImageGallery: React.ForwardRefExoticComponent<ImageGalleryProps & React.RefAttributes<ImageGalleryRef>>;
|
|
411
|
+
export default ImageGallery;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-image-gallery",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.6",
|
|
4
4
|
"description": "React carousel image gallery component with thumbnail and mobile support",
|
|
5
5
|
"main": "./build/image-gallery.cjs",
|
|
6
6
|
"module": "./build/image-gallery.es.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"lint": "eslint src",
|
|
21
21
|
"start": "webpack serve --hot --mode development --static ./example",
|
|
22
22
|
"build": "webpack --config webpack.build.cjs && rm -rf build/types/components",
|
|
23
|
-
"deploy-demo": "bash scripts/deploy-demo.sh",
|
|
23
|
+
"deploy-demo": "npm run build && bash scripts/deploy-demo.sh",
|
|
24
24
|
"preversion": "npm run lint && npm test",
|
|
25
25
|
"version": "npm run build && git add -A",
|
|
26
26
|
"postversion": "git push && git push --tags && npm run deploy-demo"
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"exports": {
|
|
33
33
|
".": {
|
|
34
|
+
"types": "./build/types/types.d.ts",
|
|
34
35
|
"import": "./build/image-gallery.es.js",
|
|
35
36
|
"require": "./build/image-gallery.cjs"
|
|
36
37
|
},
|
|
@@ -84,7 +85,7 @@
|
|
|
84
85
|
"clsx": "^2.1.1",
|
|
85
86
|
"css-loader": "^7.1.2",
|
|
86
87
|
"css-minimizer-webpack-plugin": "^7.0.4",
|
|
87
|
-
"eslint": "9.
|
|
88
|
+
"eslint": "^9.39.2",
|
|
88
89
|
"eslint-config-prettier": "^10.0.1",
|
|
89
90
|
"eslint-import-resolver-alias": "^1.1.2",
|
|
90
91
|
"eslint-plugin-import": "^2.31.0",
|