@navinc/base-react-components/cjs/column-carousel.d.ts

Nav's Pattern Library

import { Dispatch, ReactNode, SetStateAction } from 'react';
import { InferComponentProps } from './types';
declare const ColumnCarouselContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
type ColumnCarouselProviderProps = {
    children: ReactNode;
    activeColumns?: number;
    totalColumns: number;
};
export declare const ColumnCarouselProvider: ({ totalColumns, activeColumns, children, }: ColumnCarouselProviderProps) => JSX.Element;
export declare const useColumnCarouselContext: () => {
    /** @private */
    currentColumnIndex: number;
    /** @private */
    setCurrentColumnIndex: Dispatch<SetStateAction<number>>;
    cycle: () => void;
    goForward: () => void;
    goBackward: () => void;
    goToIndex: (_index: number) => void;
    activeColumns: number;
    totalColumns: number;
    canCycle: boolean;
};
type ColumnCarouselProps = {
    children: ReactNode[];
} & InferComponentProps<typeof ColumnCarouselContainer>;
/**
 * ColumnCarousel is used to display a subset of children at a time, cycling through them.  This is different from a
 * typical carousel in that there can be multiple carousels on the page each synced to the same column index.
 * Essentially this is multiple carousels controlled by a single provider.
 */
export declare const ColumnCarousel: ({ children, ...props }: ColumnCarouselProps) => JSX.Element;
export {};