@types/react-gallery-carousel
Version:
TypeScript definitions for react-gallery-carousel
178 lines (161 loc) • 6.27 kB
TypeScript
import * as React from "react";
declare namespace Carousel {
/**
* The image object used in the images array
* @example
* {
* src: `https://placedog.net/700/420?id=1`,
* srcset: `https://placedog.net/400/240?id=1 400w, https://placedog.net/700/420?id=1 700w`,
* sizes: '(max-width: 1000px) 400px, (max-width: 2000px) 700px, 1000px',
* alt: `Dogs are domesticated mammals, not natural wild animals.`,
* thumbnail: `https://placedog.net/100/60?id=1`
* }
*
* @see {@link https://github.com/yifaneye/react-gallery-carousel/blob/3adffccaf131e69eb084736aa24a0a2b47268fa8/README.md#image-object-example}
*/
interface Image {
src: string;
srcset?: string;
sizes?: string;
alt?: string;
thumbnail?: string;
}
/**
* Array of image(s) to be placed in the carousel. Each image object in the array has a required attribute 'src'.
* @example
* [
* {
* src: `https://placedog.net/700/420?id=1`,
* srcset: `https://placedog.net/400/240?id=1 400w, https://placedog.net/700/420?id=1 700w`,
* sizes: '(max-width: 1000px) 400px, (max-width: 2000px) 700px, 1000px',
* alt: `Dogs are domesticated mammals, not natural wild animals.`,
* thumbnail: `https://placedog.net/100/60?id=1`
* },
* {
* src: `https://placedog.net/700/420?id=2`,
* srcset: `https://placedog.net/400/240?id=2 400w, https://placedog.net/700/420?id=2 700w`,
* sizes: '(max-width: 1000px) 400px, (max-width: 2000px) 700px, 1000px',
* alt: `Dogs are domesticated mammals, not natural wild animals.`,
* thumbnail: `https://placedog.net/100/60?id=2`
* }
* ]
*/
type Images = Image[];
// Carousel with children has optional images.
interface CarouselWithChildren {
images?: Images;
children: React.ReactNode;
}
// Carousel has the props images mandatory if children do not exists.
interface CarouselWithImages {
images: Images;
children?: React.ReactNode;
}
type ObjectFit = React.CSSProperties["objectFit"];
/**
* The Ref carousel element with the imperative handlers.
* @see {@link https://github.com/yifaneye/react-gallery-carousel#handlers}
*/
type CarouselRef<T = unknown> = T & {
play(): void;
pause(): void;
toggleIsPlaying(): void;
maximize(): void;
minimize(): void;
toggleIsMaximized(): void;
goLeft(): void;
goRight(): void;
goToIndex(index: number): void;
};
/**
* The available position for small widgets
* @see https://github.com/yifaneye/react-gallery-carousel#small-widget-positions
*/
type SmallWidgetPositions =
| "topLeft"
| "topCenter"
| "topRight"
| "centerLeft"
| "centerCenter"
| "centerRight"
| "bottomLeft"
| "bottomCenter"
| "bottomRight";
/**
* The available position for large widgets
* @see
*/
type LargeWidgetPositions = "top" | "bottom";
/**
* The props of the carousel
* @see {@link https://github.com/yifaneye/react-gallery-carousel#props}
*/
type CarouselProps =
& (CarouselWithChildren | CarouselWithImages)
& Partial<{
thumbnails: React.ReactNode;
index: number;
isRTL: boolean;
isLoop: boolean;
isMaximized: boolean;
shouldLazyLoad: boolean;
canAutoPlay: boolean;
isAutoPlaying: boolean;
autoPlayInterval: number;
hasTransition: boolean;
swipeThreshold: number;
swipeRollBackSpeed: number;
transitionSpeed: number;
transitionDurationLimit: number;
transitionDurationMin: number;
transitionDurationMax: number;
widgetsHasShadow: boolean;
hasLeftButton: SmallWidgetPositions | boolean;
hasRightButton: SmallWidgetPositions | boolean;
hasMediaButton: SmallWidgetPositions | boolean;
hasSizeButton: SmallWidgetPositions | boolean;
hasIndexBoard: SmallWidgetPositions | boolean;
hasDotButtons: LargeWidgetPositions | boolean;
hasCaptions: LargeWidgetPositions | boolean;
hasThumbnails: boolean;
hasLeftButtonAtMax: SmallWidgetPositions | boolean;
hasRightButtonAtMax: SmallWidgetPositions | boolean;
hasMediaButtonAtMax: SmallWidgetPositions | boolean;
hasSizeButtonAtMax: SmallWidgetPositions | boolean;
hasIndexBoardButtonAtMax: SmallWidgetPositions | boolean;
hasDotButtonsAtMax: LargeWidgetPositions | boolean;
hasCaptionsAtMax: LargeWidgetPositions | boolean;
hasThumbnailsAtMax: boolean;
leftIcon: React.ReactNode;
rightIcon: React.ReactNode;
playIcon: React.ReactNode;
pauseIcon: React.ReactNode;
minIcon: React.ReactNode;
maxIcon: React.ReactNode;
activeIcon: React.ReactNode;
passiveIcon: React.ReactNode;
shouldSwipeOnMouse: boolean;
shouldMaximizeOnClick: boolean;
shouldMinimizeOnClick: boolean;
shouldMinimizeOnSwipeDown: boolean;
onIndexChange({ curIndex, curIndexForDisplay }: { curIndex: number; curIndexForDisplay: number }): void;
onSwipeMoveX(displacementX: number): void;
onSwipeMoveY(displacementY: number): void;
onSwipeEndDown(): void;
onTap(): void;
objectFit: ObjectFit;
objectFitAtMax: ObjectFit;
zIndexAtMax: number;
thumbnailWidth: string;
thumbnailHeight: string;
className: string;
style: React.CSSProperties;
ref: React.Ref<unknown>;
}>;
}
/**
* The carousel component.
* @see {@link https://github.com/yifaneye/react-gallery-carousel#props}
*/
declare function Carousel(props: Carousel.CarouselProps): React.JSX.Element;
export = Carousel;