@payfit/unity-components
Version:
61 lines (60 loc) • 1.96 kB
TypeScript
import { EmblaCarouselApi, EmblaCarouselRef } from './types.js';
import * as React from 'react';
/**
* Context type for the Carousel component.
* Provides shared state and methods to all carousel sub-components.
*/
type CarouselContextProps = {
/** Ref to the Embla carousel viewport element */
carouselRef: EmblaCarouselRef;
/** Embla Carousel API instance */
api: EmblaCarouselApi;
/** Navigate to the previous slide or page */
goToPrev: () => void;
/** Navigate to the next slide or page */
goToNext: () => void;
/** Navigate to a specific snap index */
goTo: (index: number) => void;
/** Check if navigation to next is possible */
canGoToNext: () => boolean | undefined;
/** Check if navigation to previous is possible */
canGoToPrev: () => boolean | undefined;
/** Set of slide indexes currently visible in the viewport */
visibleSlideIndexes: ReadonlySet<number>;
/** Current snap/page index (0-based) */
selectedSnap: number;
/** Total number of snaps/pages */
snapCount: number;
/** Generated IDs for accessibility attributes */
a11yIds: {
root: string;
track: string;
previousButton: string;
nextButton: string;
title: string;
};
};
/**
* Context for sharing carousel state between components.
* @internal
*/
export declare const CarouselContext: React.Context<CarouselContextProps | null>;
/**
* Hook to access the carousel context.
* Must be used within a `Carousel` component.
* @returns {CarouselContextProps} Carousel context value
* @throws {Error} If used outside of a Carousel component
* @example
* ```tsx
* function CustomCarouselPart() {
* const { goToNext, canGoToNext } = useCarousel()
* return (
* <button onClick={goToNext} disabled={!canGoToNext()}>
* Next
* </button>
* )
* }
* ```
*/
export declare function useCarousel(): CarouselContextProps;
export {};