@cimpress/react-components
Version:
React components to support the MCP styleguide
67 lines • 2.4 kB
TypeScript
import React, { ReactNode } from 'react';
import { Direction } from './CarouselIndicator';
import { PublicComponentProps } from '../types';
export interface CarouselProps extends PublicComponentProps {
/**
* Images to use as slides for the carousel.
*/
children?: ReactNode;
/**
* Use this to force the carousel to navigate to a particular slide.
*/
currentSlide?: number;
/**
* Component to display when the carousel has no images.
*/
fallbackPreview?: ReactNode;
/**
* Hides navigation and thumbnails for the carousel.
*/
hideIndicators?: boolean;
/**
* Displays the carousel in landscape mode, with the thumbnails vertically stacked to the left of the carousel. Not available in minimal mode.
*/
landscape?: boolean;
/**
* If true, the carousel will display a loading spinner.
*/
loading?: boolean;
/**
* Whether to show the carousel in minimal mode, with a numerical indicator, or in full mode, with thumbnail images.
*/
minimal?: boolean;
/**
* Callback function invoked when the large carousel image is clicked.
*/
onCarouselClick?: (currentSlide: number) => void;
/**
* Callback function invoked whenever the carousel navigates to a new slide.
*/
onSlideChanged?: (currentSlide: number) => void;
/**
* Size for the main carousel image, in pixels. Only used when the carousel is in minimal mode.
*/
pxSize?: number;
/**
* Shows a zoom overlay on hover. Must also provide onCarouselClick to show.
* @default false
*/
showZoomOverlay?: boolean;
/**
* Content to put in the zoom overlay.
*/
zoomOverlayContent?: ReactNode;
/**
* Size for the carousel. If carousel is in minimal mode, this size will be ignored in favor of pxSize.
*/
size?: 'xs' | 's' | 'm' | 'l' | 'xl';
}
export interface SlideState {
currentSlide: number;
previousSlide: number | null;
transitioning: boolean;
timer: number | null;
direction: Direction | '';
}
export declare const Carousel: ({ loading, size, pxSize, minimal, children, onCarouselClick, fallbackPreview, hideIndicators, showZoomOverlay, zoomOverlayContent, className, style, landscape, currentSlide, onSlideChanged, ...rest }: CarouselProps) => React.JSX.Element;
//# sourceMappingURL=Carousel.d.ts.map