react-responsive-3d-carousel/dist/index.d.ts

React Responsive 3D Carousel

import React from 'react';

type LayoutInfo = {
    width?: number | string;
    height?: number | string;
    translate: {
        x: number | string;
        y: number | string;
        z: number | string;
    };
    rotate: {
        x: number;
        y: number;
        z: number;
    };
    offset: {
        x: number | string;
        y: number | string;
        z: number | string;
    };
};
type CarouselLayoutInfo = {
    default: LayoutInfo;
    [key: number]: LayoutInfo;
};

type DefaultOption = {
    numOfSlides?: 'auto' | 2 | 3 | 5;
    widthFactor?: number;
    depthFactor?: number;
    angleFactor?: number;
};

type LayoutType = 'default' | CarouselLayoutInfo;

type SwipeDirection = 'vertical' | 'horizontal';

interface ArrowsProps {
    width?: string;
    height?: string;
    color?: string;
    hoverColor?: string;
    shadow?: string;
    prevIcon?: JSX.Element;
    nextIcon?: JSX.Element;
    nextArrowTranslate?: [string, string];
    prevArrowTranslate?: [string, string];
    onClickNext?: React.MouseEventHandler;
    onClickPrev?: React.MouseEventHandler;
}
declare const Arrows: React.FC<ArrowsProps>;

interface IndicatorsProps {
    length: number;
    curIndex: number;
    gap?: string;
    color?: string;
    width?: string;
    height?: string;
    activeColor?: string;
    shadow?: string;
    translate?: [string, string];
    indicatorIcon?: JSX.Element;
    onClick?: (e: React.MouseEvent, index: number) => void;
}
declare const Indicators: React.FC<IndicatorsProps>;

interface StatusProps {
    length: number;
    curIndex: number;
    color?: string;
    fontSize?: string;
    fontWeight?: string;
    shadow?: string;
    translate?: [string, string];
}
declare const Status: React.FC<StatusProps>;

type AlignType = 'center' | 'top' | 'bottom';
interface CarouselProps {
    children?: React.ReactNode;
    ariaLabel?: string;
    items: JSX.Element[];
    startIndex?: number;
    /** Container */
    containerWidth?: string;
    containerHeight?: string;
    containerPadding?: string;
    /** Carousel 2D */
    width?: string | number;
    height?: string | number;
    aspectRatio?: number | 'auto';
    align?: AlignType;
    boxShadow?: string;
    /** Carousel 3D */
    perspective?: number | string;
    perspectiveOrigin?: string;
    layout?: LayoutType;
    defaultOption?: DefaultOption;
    /** Carousel Transition */
    sizeDuration?: number;
    sizeTimingFn?: string;
    transformDuration?: number;
    transformTimingFn?: string;
    /** Carousel Interaction */
    focusOnSelect?: boolean;
    pauseOnHover?: boolean;
    pauseOnTransition?: 'none' | 'size' | 'transform' | 'both';
    /** Carousel Callback */
    onChange?: (index: number, item: JSX.Element) => void;
    onClickItem?: (e: React.MouseEvent, index: number, item: JSX.Element, isCurIndex: boolean) => void;
    /** Carousel Play */
    autoPlay?: boolean;
    interval?: number;
    infiniteLoop?: boolean;
    /** Carousel Focus */
    autoFocus?: boolean;
    slideWithKeyboard?: 'none' | 'vertical' | 'horizontal' | 'both';
    /** Carousel Swipe */
    swipeable?: boolean;
    swipeDirection?: SwipeDirection;
    onSwipeStart?: (event: TouchEvent) => void;
    onSwipeEnd?: (event: TouchEvent) => void;
    onSwipeMove?: (event: TouchEvent) => void;
    showStatus?: boolean;
    status?: Omit<StatusProps, "length" | "curIndex">;
    showArrows?: boolean;
    arrows?: ArrowsProps;
    showIndicators?: boolean;
    indicators?: Omit<IndicatorsProps, "length" | "curIndex">;
}
type DefaultContext = {
    curIndex: number;
    setCurIndex: React.Dispatch<React.SetStateAction<number>>;
    slideNext: () => void;
    slidePrev: () => void;
};
declare const CarouselContext: React.Context<DefaultContext>;
declare const Carousel: React.FC<CarouselProps>;

export { Arrows, Carousel, CarouselContext, Indicators, Status };