UNPKG

14.4 kBTypeScriptView Raw
1import * as React from 'react';
2
3import type { SwiperOptions, Swiper as SwiperClass } from './types/index.d.ts';
4
5type SwiperProps = Omit<
6 React.HTMLAttributes<HTMLElement>,
7 | 'onProgress'
8 | 'onClick'
9 | 'onTouchEnd'
10 | 'onTouchMove'
11 | 'onTouchStart'
12 | 'onTransitionEnd'
13 | 'onKeyPress'
14 | 'onDoubleClick'
15 | 'onScroll'
16 | 'onResize'
17> &
18 SwiperOptions & {
19 /**
20 * Swiper container tag
21 *
22 * @default 'div'
23 */
24 tag?: string;
25
26 /**
27 * Swiper wrapper tag
28 *
29 * @default 'div'
30 */
31 wrapperTag?: string;
32
33 /**
34 * Get Swiper instance
35 */
36 onSwiper?: (swiper: SwiperClass) => void;
37
38 /**
39 * Event will be fired in when autoplay started
40 */
41 onAutoplayStart?: (swiper: SwiperClass) => void;
42 /**
43 * Event will be fired when autoplay stopped
44 */
45 onAutoplayStop?: (swiper: SwiperClass) => void;
46 /**
47 * Event will be fired on autoplay pause
48 */
49 onAutoplayPause?: (swiper: SwiperClass) => void;
50 /**
51 * Event will be fired on autoplay resume
52 */
53 onAutoplayResume?: (swiper: SwiperClass) => void;
54 /**
55 * Event triggers continuously while autoplay is enabled. It contains time left (in ms) before transition to next slide and percentage of that time related to autoplay delay
56 */
57 onAutoplayTimeLeft?: (swiper: SwiperClass, timeLeft: number, percentage: number) => void;
58 /**
59 * Event will be fired when slide changed with autoplay
60 */
61 onAutoplay?: (swiper: SwiperClass) => void;/**
62 * Event will be fired on window hash change
63 */
64 onHashChange?: (swiper: SwiperClass) => void;
65 /**
66 * Event will be fired when swiper updates the hash
67 */
68 onHashSet?: (swiper: SwiperClass) => void;/**
69 * Event will be fired on key press
70 */
71 onKeyPress?: (swiper: SwiperClass, keyCode: string) => void;/**
72 * Event will be fired on navigation hide
73 */
74 onNavigationHide?: (swiper: SwiperClass) => void;
75 /**
76 * Event will be fired on navigation show
77 */
78 onNavigationShow?: (swiper: SwiperClass) => void;
79 /**
80 * Event will be fired on navigation prev button click
81 */
82 onNavigationPrev?: (swiper: SwiperClass) => void;
83 /**
84 * Event will be fired on navigation next button click
85 */
86 onNavigationNext?: (swiper: SwiperClass) => void;/**
87 * Event will be fired after pagination rendered
88 */
89 onPaginationRender?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
90
91 /**
92 * Event will be fired when pagination updated
93 */
94 onPaginationUpdate?: (swiper: SwiperClass, paginationEl: HTMLElement) => void;
95
96 /**
97 * Event will be fired on pagination hide
98 */
99 onPaginationHide?: (swiper: SwiperClass) => void;
100
101 /**
102 * Event will be fired on pagination show
103 */
104 onPaginationShow?: (swiper: SwiperClass) => void;/**
105 * Event will be fired on draggable scrollbar drag start
106 */
107 onScrollbarDragStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
108
109 /**
110 * Event will be fired on draggable scrollbar drag move
111 */
112 onScrollbarDragMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
113
114 /**
115 * Event will be fired on draggable scrollbar drag end
116 */
117 onScrollbarDragEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;/**
118 * Event will be fired on zoom change
119 */
120 onZoomChange?: (swiper: SwiperClass, scale: number, imageEl: HTMLElement, slideEl: HTMLElement) => void;/**
121 * Event will be fired on mousewheel scroll
122 */
123 onScroll?: (swiper: SwiperClass, event: WheelEvent) => void;
124
125 /**
126 * Fired right after Swiper initialization.
127 * @note Note that with `swiper.on('init')` syntax it will
128 * work only in case you set `init: false` parameter.
129 *
130 * @example
131 * ```js
132 * const swiper = new Swiper('.swiper', {
133 * init: false,
134 * // other parameters
135 * });
136 * swiper.on('init', function() {
137 * // do something
138 * });
139 * // init Swiper
140 * swiper.init();
141 * ```
142 *
143 * @example
144 * ```js
145 * // Otherwise use it as the parameter:
146 * const swiper = new Swiper('.swiper', {
147 * // other parameters
148 * on: {
149 * init: function () {
150 * // do something
151 * },
152 * }
153 * });
154 * ```
155 */
156 onInit?: (swiper: SwiperClass) => any;
157
158 /**
159 * Event will be fired right before Swiper destroyed
160 */
161 onBeforeDestroy?: (swiper: SwiperClass) => void;
162
163 /**
164 * Event will be fired after slides and their sizes are calculated and updated
165 */
166 onSlidesUpdated?: (swiper: SwiperClass) => void;
167 /**
168 * Event will be fired when currently active slide is changed
169 */
170 onSlideChange?: (swiper: SwiperClass) => void;
171
172 /**
173 * Event will be fired in the beginning of animation to other slide (next or previous).
174 */
175 onSlideChangeTransitionStart?: (swiper: SwiperClass) => void;
176
177 /**
178 * Event will be fired after animation to other slide (next or previous).
179 */
180 onSlideChangeTransitionEnd?: (swiper: SwiperClass) => void;
181
182 /**
183 * Same as "slideChangeTransitionStart" but for "forward" direction only
184 */
185 onSlideNextTransitionStart?: (swiper: SwiperClass) => void;
186
187 /**
188 * Same as "slideChangeTransitionEnd" but for "forward" direction only
189 */
190 onSlideNextTransitionEnd?: (swiper: SwiperClass) => void;
191
192 /**
193 * Same as "slideChangeTransitionStart" but for "backward" direction only
194 */
195 onSlidePrevTransitionStart?: (swiper: SwiperClass) => void;
196
197 /**
198 * Same as "slideChangeTransitionEnd" but for "backward" direction only
199 */
200 onSlidePrevTransitionEnd?: (swiper: SwiperClass) => void;
201
202 /**
203 * Event will be fired in the beginning of transition.
204 */
205 onTransitionStart?: (swiper: SwiperClass) => void;
206
207 /**
208 * Event will be fired after transition.
209 */
210 onTransitionEnd?: (swiper: SwiperClass) => void;
211
212 /**
213 * Event will be fired when user touch Swiper. Receives `pointerdown` event as an arguments.
214 */
215 onTouchStart?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
216
217 /**
218 * Event will be fired when user touch and move finger over Swiper. Receives `pointermove` event as an arguments.
219 */
220 onTouchMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
221
222 /**
223 * Event will be fired when user touch and move finger over Swiper in direction opposite to direction parameter. Receives `pointermove` event as an arguments.
224 */
225 onTouchMoveOpposite?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
226
227 /**
228 * Event will be fired when user touch and move finger over Swiper and move it. Receives `pointermove` event as an arguments.
229 */
230 onSliderMove?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
231
232 /**
233 * Event will be fired when user release Swiper. Receives `pointerup` event as an arguments.
234 */
235 onTouchEnd?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
236
237 /**
238 * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
239 */
240 onClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
241
242 /**
243 * Event will be fired when user click/tap on Swiper. Receives `pointerup` event as an arguments.
244 */
245 onTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
246
247 /**
248 * Event will be fired when user double tap on Swiper's container. Receives `pointerup` event as an arguments
249 */
250 onDoubleTap?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
251
252 /**
253 * Event will be fired when Swiper progress is changed, as an arguments it receives progress that is always from 0 to 1
254 */
255 onProgress?: (swiper: SwiperClass, progress: number) => void;
256
257 /**
258 * Event will be fired when Swiper reach its beginning (initial position)
259 */
260 onReachBeginning?: (swiper: SwiperClass) => void;
261
262 /**
263 * Event will be fired when Swiper reach last slide
264 */
265 onReachEnd?: (swiper: SwiperClass) => void;
266
267 /**
268 * Event will be fired when Swiper goes to beginning or end position
269 */
270 onToEdge?: (swiper: SwiperClass) => void;
271
272 /**
273 * Event will be fired when Swiper goes from beginning or end position
274 */
275 onFromEdge?: (swiper: SwiperClass) => void;
276
277 /**
278 * Event will be fired when swiper's wrapper change its position. Receives current translate value as an arguments
279 */
280 onSetTranslate?: (swiper: SwiperClass, translate: number) => void;
281
282 /**
283 * Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments
284 */
285 onSetTransition?: (swiper: SwiperClass, transition: number) => void;
286
287 /**
288 * Event will be fired on window resize right before swiper's onresize manipulation
289 */
290 onResize?: (swiper: SwiperClass) => void;
291
292 /**
293 * Event will be fired if observer is enabled and it detects DOM mutations
294 */
295 onObserverUpdate?: (swiper: SwiperClass) => void;
296
297 /**
298 * Event will be fired right before "loop fix"
299 */
300 onBeforeLoopFix?: (swiper: SwiperClass) => void;
301
302 /**
303 * Event will be fired after "loop fix"
304 */
305 onLoopFix?: (swiper: SwiperClass) => void;
306
307 /**
308 * Event will be fired on breakpoint change
309 */
310 onBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
311
312 /**
313 * !INTERNAL: Event will fired right before breakpoint change
314 */
315 _beforeBreakpoint?: (swiper: SwiperClass, breakpointParams: SwiperOptions) => void;
316
317 /**
318 * !INTERNAL: Event will fired after setting CSS classes on swiper container element
319 */
320 _containerClasses?: (swiper: SwiperClass, classNames: string) => void;
321
322 /**
323 * !INTERNAL: Event will fired after setting CSS classes on swiper slide element
324 */
325 _slideClass?: (swiper: SwiperClass, slideEl: HTMLElement, classNames: string) => void;
326
327 /**
328 * !INTERNAL: Event will fired after setting CSS classes on all swiper slides
329 */
330 _slideClasses?: (
331 swiper: SwiperClass,
332 slides: { slideEl: HTMLElement; classNames: string; index: number }[],
333 ) => void;
334
335 /**
336 * !INTERNAL: Event will fired as soon as swiper instance available (before init)
337 */
338 _swiper?: (swiper: SwiperClass) => void;
339
340 /**
341 * !INTERNAL: Event will be fired on free mode touch end (release) and there will no be momentum
342 */
343 _freeModeNoMomentumRelease?: (swiper: SwiperClass) => void;
344
345 /**
346 * Event will fired on active index change
347 */
348 onActiveIndexChange?: (swiper: SwiperClass) => void;
349 /**
350 * Event will fired on snap index change
351 */
352 onSnapIndexChange?: (swiper: SwiperClass) => void;
353 /**
354 * Event will fired on real index change
355 */
356 onRealIndexChange?: (swiper: SwiperClass) => void;
357 /**
358 * Event will fired right after initialization
359 */
360 onAfterInit?: (swiper: SwiperClass) => void;
361 /**
362 * Event will fired right before initialization
363 */
364 onBeforeInit?: (swiper: SwiperClass) => void;
365 /**
366 * Event will fired before resize handler
367 */
368 onBeforeResize?: (swiper: SwiperClass) => void;
369 /**
370 * Event will fired before slide change transition start
371 */
372 onBeforeSlideChangeStart?: (swiper: SwiperClass) => void;
373 /**
374 * Event will fired before transition start
375 */
376 onBeforeTransitionStart?: (swiper: SwiperClass, speed: number, internal: any) => void; // what is internal?
377 /**
378 * Event will fired on direction change
379 */
380 onChangeDirection?: (swiper: SwiperClass) => void;
381 /**
382 * Event will be fired when user double click/tap on Swiper
383 */
384 onDoubleClick?: (swiper: SwiperClass, event: MouseEvent | TouchEvent | PointerEvent) => void;
385 /**
386 * Event will be fired on swiper destroy
387 */
388 onDestroy?: (swiper: SwiperClass) => void;
389 /**
390 * Event will be fired on momentum bounce
391 */
392 onMomentumBounce?: (swiper: SwiperClass) => void;
393 /**
394 * Event will be fired on orientation change (e.g. landscape -> portrait)
395 */
396 onOrientationchange?: (swiper: SwiperClass) => void;
397 /**
398 * Event will be fired in the beginning of animation of resetting slide to current one
399 */
400 onSlideResetTransitionStart?: (swiper: SwiperClass) => void;
401 /**
402 * Event will be fired in the end of animation of resetting slide to current one
403 */
404 onSlideResetTransitionEnd?: (swiper: SwiperClass) => void;
405 /**
406 * Event will be fired with first touch/drag move
407 */
408 onSliderFirstMove?: (swiper: SwiperClass, event: TouchEvent) => void;
409 /**
410 * Event will be fired when number of slides has changed
411 */
412 onSlidesLengthChange?: (swiper: SwiperClass) => void;
413 /**
414 * Event will be fired when slides grid has changed
415 */
416 onSlidesGridLengthChange?: (swiper: SwiperClass) => void;
417 /**
418 * Event will be fired when snap grid has changed
419 */
420 onSnapGridLengthChange?: (swiper: SwiperClass) => void;
421 /**
422 * Event will be fired after swiper.update() call
423 */
424 onUpdate?: (swiper: SwiperClass) => void;
425 /**
426 * Event will be fired when swiper is locked (when `watchOverflow` enabled)
427 */
428 onLock?: (swiper: SwiperClass) => void;
429 /**
430 * Event will be fired when swiper is unlocked (when `watchOverflow` enabled)
431 */
432 onUnlock?: (swiper: SwiperClass) => void;
433
434 };
435
436interface SlideData {
437 isActive: boolean;
438 isVisible: boolean;
439 isPrev: boolean;
440 isNext: boolean;
441}
442
443type SwiperSlideProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
444 /**
445 * Slide tag
446 *
447 * @default 'div'
448 */
449 tag?: string;
450
451 /**
452 * Enables additional wrapper required for zoom mode
453 *
454 * @default false
455 */
456 zoom?: boolean;
457
458 /**
459 * Adds lazy preloader to the slide
460 *
461 * @default false
462 */
463 lazy?: boolean;
464
465 /**
466 * Slide's index in slides array/collection
467 *
468 * @default false
469 */
470 virtualIndex?: number;
471
472 /**
473 * Slide's child element or render function
474 *
475 * @default undefined
476 */
477 children?: React.ReactNode | ((slideData: SlideData) => React.ReactNode);
478};
479
480interface SwiperRef extends React.HTMLAttributes<HTMLElement> {
481 swiper: SwiperClass;
482}
483
484declare const Swiper: React.FunctionComponent<
485 React.RefAttributes<SwiperRef> & React.PropsWithChildren<SwiperProps>
486>;
487declare const SwiperSlide: React.FunctionComponent<SwiperSlideProps>;
488
489declare const useSwiper: () => SwiperClass;
490declare const useSwiperSlide: () => SlideData;
491
492export {
493 Swiper,
494 SwiperSlide,
495 SwiperProps,
496 SwiperSlideProps,
497 SwiperRef,
498 useSwiper,
499 useSwiperSlide,
500 SwiperClass,
501};