swiper-react.d.ts 14 KB

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