react-3d-flipbook 1.1.1

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/types/index.d.ts

@@ -0,0 +1,481 @@
+export interface FlipbookPage {
+    /** Image source URL for the page */
+    src: string;
+    /** Thumbnail image URL */
+    thumb?: string;
+    /** Page title for table of contents */
+    title?: string;
+    /** HTML content to overlay on the page */
+    htmlContent?: string;
+    /** JSON data associated with the page */
+    json?: Record<string, unknown>;
+    /** Which side of a double page spread */
+    side?: "left" | "right";
+    /** Whether this is an empty/placeholder page */
+    empty?: boolean;
+    /** Page width in pixels (for landscape/portrait support) */
+    width?: number;
+    /** Page height in pixels (for landscape/portrait support) */
+    height?: number;
+    /** Page orientation - auto-detected from width/height if not specified */
+    orientation?: "portrait" | "landscape";
+}
+export interface TocItem {
+    title: string;
+    page: number;
+    children?: TocItem[];
+}
+export type ViewMode = "webgl";
+export type SkinType = "dark" | "light" | "gradient";
+export type LayoutType = "1" | "2" | "3" | "4";
+export type HAlign = "left" | "center" | "right";
+export type VAlign = "top" | "middle" | "bottom";
+export interface ButtonConfig {
+    enabled?: boolean;
+    title?: string;
+    iconFA?: string;
+    iconM?: string;
+    iconFA_alt?: string;
+    iconM_alt?: string;
+    hAlign?: HAlign;
+    vAlign?: VAlign;
+    hideOnMobile?: boolean;
+}
+export interface DownloadButtonConfig extends ButtonConfig {
+    url?: string;
+    name?: string;
+    forceDownload?: boolean;
+    openInNewWindow?: boolean;
+}
+export interface CurrentPageConfig {
+    enabled?: boolean;
+    title?: string;
+    vAlign?: VAlign;
+    hAlign?: HAlign;
+    marginH?: number;
+    marginV?: number;
+    color?: string;
+    background?: string;
+}
+export interface CloseButtonConfig extends ButtonConfig {
+    size?: number;
+}
+export interface ShareProviderConfig {
+    enabled?: boolean;
+    icon?: string;
+}
+export interface ShareConfig {
+    whatsapp?: ShareProviderConfig;
+    twitter?: ShareProviderConfig;
+    facebook?: ShareProviderConfig;
+    pinterest?: ShareProviderConfig;
+    email?: ShareProviderConfig;
+    linkedin?: ShareProviderConfig;
+    digg?: ShareProviderConfig;
+    reddit?: ShareProviderConfig;
+}
+export interface PdfConfig {
+    annotationLayer?: boolean;
+}
+export interface FillPreloaderConfig {
+    enabled?: boolean;
+    imgEmpty?: string;
+    imgFull?: string;
+}
+export interface LocalizationStrings {
+    print?: string;
+    printLeftPage?: string;
+    printRightPage?: string;
+    printCurrentPage?: string;
+    printAllPages?: string;
+    download?: string;
+    downloadLeftPage?: string;
+    downloadRightPage?: string;
+    downloadCurrentPage?: string;
+    downloadAllPages?: string;
+    bookmarks?: string;
+    bookmarkLeftPage?: string;
+    bookmarkRightPage?: string;
+    bookmarkCurrentPage?: string;
+    search?: string;
+    findInDocument?: string;
+    pagesFoundContaining?: string;
+    noMatches?: string;
+    matchesFound?: string;
+    thumbnails?: string;
+    tableOfContent?: string;
+    share?: string;
+    pressEscToClose?: string;
+    password?: string;
+}
+export interface MobileConfig {
+    shadows?: boolean;
+    pageSegmentsW?: number;
+}
+export interface AssetsConfig {
+    preloader?: string;
+    overlay?: string;
+    flipMp3?: string;
+    spinner?: string;
+    backgroundMp3?: string;
+}
+export interface LightboxConfig {
+    enabled?: boolean;
+    opened?: boolean;
+    fullscreen?: boolean;
+    closeOnClick?: boolean;
+    resetOnOpen?: boolean;
+    background?: string;
+    backgroundColor?: string;
+    backgroundPattern?: string;
+    backgroundImage?: string;
+    startPage?: number;
+    marginV?: number;
+    marginH?: number;
+    css?: string;
+    preload?: boolean;
+    showMenu?: boolean;
+    closeOnBack?: boolean;
+}
+export interface FlipbookOptions {
+    name?: string;
+    pages?: FlipbookPage[];
+    tableOfContent?: TocItem[];
+    tableOfContentCloseOnClick?: boolean;
+    thumbsCloseOnClick?: boolean;
+    deeplinkingEnabled?: boolean;
+    deeplinkingPrefix?: string;
+    assets?: AssetsConfig;
+    pdfUrl?: string | null;
+    pdfBrowserViewerIfMobile?: boolean;
+    pdfBrowserViewerIfIE?: boolean;
+    pdfBrowserViewerFullscreen?: boolean;
+    pdfBrowserViewerFullscreenTarget?: string;
+    rangeChunkSize?: number;
+    disableRange?: boolean;
+    disableStream?: boolean;
+    disableAutoFetch?: boolean;
+    pdfAutoLinks?: boolean;
+    pdf?: PdfConfig;
+    pdfTextLayer?: boolean;
+    annotationLayer?: boolean;
+    htmlLayer?: boolean;
+    rightToLeft?: boolean;
+    startPage?: number;
+    sound?: boolean;
+    backgroundColor?: string;
+    backgroundImage?: string;
+    backgroundPattern?: string;
+    backgroundTransparent?: boolean;
+    thumbSize?: number;
+    loadAllPages?: boolean;
+    loadPagesF?: number;
+    loadPagesB?: number;
+    autoplayOnStart?: boolean;
+    autoplayInterval?: number;
+    autoplayLoop?: boolean;
+    skin?: SkinType;
+    layout?: LayoutType;
+    skinColor?: string;
+    skinBackground?: string;
+    menuOverBook?: boolean;
+    menuFloating?: boolean;
+    menuBackground?: string;
+    menuShadow?: string;
+    menuMargin?: number;
+    menuPadding?: number;
+    menuTransparent?: boolean;
+    hideMenu?: boolean;
+    menu2OverBook?: boolean;
+    menu2Floating?: boolean;
+    menu2Background?: string;
+    menu2Shadow?: string;
+    menu2Margin?: number;
+    menu2Padding?: number;
+    menu2Transparent?: boolean;
+    btnColor?: string;
+    btnBackground?: string;
+    btnSize?: number;
+    btnRadius?: number;
+    btnMargin?: number;
+    btnPaddingV?: number;
+    btnPaddingH?: number;
+    btnShadow?: string;
+    btnTextShadow?: string;
+    btnBorder?: string;
+    btnColorHover?: string;
+    btnBackgroundHover?: string;
+    sideBtnColor?: string;
+    sideBtnBackground?: string;
+    sideBtnSize?: number;
+    sideBtnRadius?: number;
+    sideBtnMargin?: number;
+    sideBtnPaddingV?: number;
+    sideBtnPaddingH?: number;
+    sideBtnShadow?: string;
+    sideBtnTextShadow?: string;
+    sideBtnBorder?: string;
+    sideBtnColorHover?: string;
+    sideBtnBackgroundHover?: string;
+    floatingBtnColor?: string;
+    floatingBtnColorHover?: string;
+    floatingBtnBackground?: string;
+    floatingBtnBackgroundHover?: string;
+    floatingBtnSize?: number | null;
+    floatingBtnRadius?: number | null;
+    floatingBtnMargin?: number | null;
+    floatingBtnPadding?: number | null;
+    floatingBtnShadow?: string;
+    floatingBtnTextShadow?: string;
+    floatingBtnBorder?: string;
+    currentPage?: CurrentPageConfig;
+    btnFirst?: ButtonConfig;
+    btnPrev?: ButtonConfig;
+    btnNext?: ButtonConfig;
+    btnLast?: ButtonConfig;
+    btnZoomIn?: ButtonConfig;
+    btnZoomOut?: ButtonConfig;
+    btnRotateLeft?: ButtonConfig;
+    btnRotateRight?: ButtonConfig;
+    btnAutoplay?: ButtonConfig;
+    btnSearch?: ButtonConfig;
+    btnSelect?: ButtonConfig;
+    btnBookmark?: ButtonConfig;
+    btnToc?: ButtonConfig;
+    btnThumbs?: ButtonConfig;
+    btnShare?: ButtonConfig;
+    btnPrint?: ButtonConfig;
+    btnDownloadPages?: DownloadButtonConfig;
+    btnDownloadPdf?: DownloadButtonConfig;
+    btnSound?: ButtonConfig;
+    btnExpand?: ButtonConfig;
+    btnClose?: CloseButtonConfig;
+    btnOrder?: string[];
+    btnShareIfMobile?: boolean;
+    btnSoundIfMobile?: boolean;
+    btnPrintIfMobile?: boolean;
+    sideNavigationButtons?: boolean;
+    shareUrl?: string;
+    shareTitle?: string;
+    shareImage?: string;
+    share?: ShareConfig;
+    pageTextureSize?: number;
+    pageTextureSizeSmall?: number;
+    thumbTextureSize?: number;
+    pageTextureSizeMobile?: number;
+    pageTextureSizeMobileSmall?: number;
+    viewMode?: ViewMode;
+    singlePageMode?: boolean;
+    singlePageModeIfMobile?: boolean;
+    zoomMin?: number;
+    zoomMax2?: number;
+    zoomSize?: number;
+    zoomStep?: number;
+    zoomTime?: number;
+    zoomReset?: boolean;
+    zoomResetTime?: number;
+    wheelDisabledNotFullscreen?: boolean;
+    arrowsDisabledNotFullscreen?: boolean;
+    arrowsAlwaysEnabledForNavigation?: boolean;
+    touchSwipeEnabled?: boolean;
+    doubleClickZoomDisabled?: boolean;
+    pageDragDisabled?: boolean;
+    rightClickEnabled?: boolean;
+    responsiveView?: boolean;
+    responsiveViewRatio?: number;
+    responsiveViewTreshold?: number;
+    minPixelRatio?: number;
+    pageFlipDuration?: number;
+    contentOnStart?: boolean;
+    thumbnailsOnStart?: boolean;
+    searchOnStart?: boolean;
+    sideMenuOverBook?: boolean;
+    sideMenuOverMenu?: boolean;
+    sideMenuOverMenu2?: boolean;
+    sideMenuPosition?: "left" | "right";
+    lightBox?: boolean;
+    lightBoxOpened?: boolean;
+    lightBoxFullscreen?: boolean;
+    lightboxCloseOnClick?: boolean;
+    lightboxResetOnOpen?: boolean;
+    lightboxBackground?: string;
+    lightboxBackgroundColor?: string;
+    lightboxBackgroundPattern?: string;
+    lightboxBackgroundImage?: string;
+    lightboxStartPage?: number;
+    lightboxMarginV?: number;
+    lightboxMarginH?: number;
+    lightboxCSS?: string;
+    lightboxPreload?: boolean;
+    lightboxShowMenu?: boolean;
+    lightboxCloseOnBack?: boolean;
+    disableImageResize?: boolean;
+    pan?: number;
+    panMax?: number;
+    panMax2?: number;
+    panMin?: number;
+    panMin2?: number;
+    tilt?: number;
+    tiltMax?: number;
+    tiltMax2?: number;
+    tiltMin?: number;
+    tiltMin2?: number;
+    rotateCameraOnMouseMove?: boolean;
+    rotateCameraOnMouseDrag?: boolean;
+    lights?: boolean;
+    lightColor?: number;
+    lightPositionX?: number;
+    lightPositionZ?: number;
+    lightPositionY?: number;
+    lightIntensity?: number;
+    shadows?: boolean;
+    shadowMapSize?: number;
+    shadowOpacity?: number;
+    shadowDistance?: number;
+    pageRoughness?: number;
+    pageMetalness?: number;
+    pageHardness?: number;
+    coverHardness?: number;
+    pageSegmentsW?: number;
+    pageSegmentsH?: number;
+    pageMiddleShadowSize?: number;
+    pageMiddleShadowColorL?: string;
+    pageMiddleShadowColorR?: string;
+    antialias?: boolean;
+    /** Camera zoom/margin factor - higher values move camera further back (default: 1.35) */
+    cameraZoom?: number;
+    /** Camera vertical position offset (default: 0) */
+    cameraPositionY?: number;
+    /** Camera look-at Y position (default: 0) */
+    cameraLookAtY?: number;
+    /** Field of view in degrees (default: 45) */
+    cameraFov?: number;
+    /** Base page scale in world units - affects overall page size (default: 6) */
+    pageScale?: number;
+    preloaderText?: string;
+    fillPreloader?: FillPreloaderConfig;
+    logoImg?: string;
+    logoUrl?: string;
+    logoCSS?: string;
+    logoHideOnMobile?: boolean;
+    printMenu?: boolean;
+    downloadMenu?: boolean;
+    cover?: boolean;
+    backCover?: boolean;
+    googleAnalyticsTrackingCode?: string;
+    minimumAndroidVersion?: number;
+    linkColor?: string;
+    linkColorHover?: string;
+    linkOpacity?: number;
+    linkTarget?: string;
+    pageNumberOffset?: number;
+    flipSound?: boolean;
+    backgroundMusic?: string;
+    strings?: LocalizationStrings;
+    mobile?: MobileConfig;
+}
+export interface FlipbookEventMap {
+    pageFlip: {
+        page: number;
+        direction: "next" | "prev";
+    };
+    pageFlipStart: {
+        page: number;
+        direction: "next" | "prev";
+    };
+    pageFlipEnd: {
+        page: number;
+    };
+    zoomChange: {
+        zoom: number;
+    };
+    ready: void;
+    loadProgress: {
+        progress: number;
+    };
+    pageLoaded: {
+        page: number;
+    };
+    fullscreenChange: {
+        isFullscreen: boolean;
+    };
+    lightboxOpen: void;
+    lightboxClose: void;
+    soundToggle: {
+        enabled: boolean;
+    };
+    autoplayToggle: {
+        enabled: boolean;
+    };
+}
+export interface FlipbookInstance {
+    nextPage: () => void;
+    prevPage: () => void;
+    firstPage: () => void;
+    lastPage: () => void;
+    goToPage: (page: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    zoomTo: (zoom: number) => void;
+    getCurrentPage: () => number;
+    getNumPages: () => number;
+    getZoom: () => number;
+    isFullscreen: () => boolean;
+    toggleFullscreen: () => void;
+    toggleAutoplay: () => void;
+    toggleSound: () => void;
+    toggleThumbnails: () => void;
+    toggleTableOfContents: () => void;
+    toggleSearch: () => void;
+    openLightbox: () => void;
+    closeLightbox: () => void;
+    bookmarkPage: (page: number) => void;
+    removeBookmark: (page: number) => void;
+    getBookmarkedPages: () => number[];
+    printCurrentPage: () => void;
+    downloadCurrentPage: () => void;
+    destroy: () => void;
+}
+export interface FlipbookProps extends Partial<FlipbookOptions> {
+    /** Pages to display in the flipbook */
+    pages: FlipbookPage[];
+    /** Class name for the container element */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+    /** Width of the flipbook container */
+    width?: number | string;
+    /** Height of the flipbook container */
+    height?: number | string;
+    onPageFlip?: (event: FlipbookEventMap["pageFlip"]) => void;
+    onPageFlipStart?: (event: FlipbookEventMap["pageFlipStart"]) => void;
+    onPageFlipEnd?: (event: FlipbookEventMap["pageFlipEnd"]) => void;
+    onZoomChange?: (event: FlipbookEventMap["zoomChange"]) => void;
+    onReady?: () => void;
+    onLoadProgress?: (event: FlipbookEventMap["loadProgress"]) => void;
+    onPageLoaded?: (event: FlipbookEventMap["pageLoaded"]) => void;
+    onFullscreenChange?: (event: FlipbookEventMap["fullscreenChange"]) => void;
+    onLightboxOpen?: () => void;
+    onLightboxClose?: () => void;
+    onSoundToggle?: (event: FlipbookEventMap["soundToggle"]) => void;
+    onAutoplayToggle?: (event: FlipbookEventMap["autoplayToggle"]) => void;
+}
+export interface UseFlipbookReturn {
+    containerRef: React.RefObject<HTMLDivElement>;
+    flipbookRef: React.RefObject<FlipbookInstance>;
+    currentPage: number;
+    numPages: number;
+    zoom: number;
+    isFullscreen: boolean;
+    isLoading: boolean;
+    isReady: boolean;
+}
+export interface FlipbookContextValue {
+    options: FlipbookOptions;
+    currentPage: number;
+    numPages: number;
+    zoom: number;
+    isFullscreen: boolean;
+    isLoading: boolean;
+    instance: FlipbookInstance | null;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Clamp a value between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Linear interpolation between two values
+ */
+export declare function lerp(start: number, end: number, t: number): number;
+/**
+ * Convert degrees to radians
+ */
+export declare function degToRad(degrees: number): number;
+/**
+ * Convert radians to degrees
+ */
+export declare function radToDeg(radians: number): number;
+/**
+ * Debounce a function
+ */
+export declare function debounce<T extends (...args: never[]) => void>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Throttle a function
+ */
+export declare function throttle<T extends (...args: unknown[]) => unknown>(func: T, limit: number): (...args: Parameters<T>) => void;
+/**
+ * Check if a value is a number
+ */
+export declare function isNumber(value: unknown): value is number;
+/**
+ * Check if running on mobile device
+ */
+export declare function isMobile(): boolean;
+/**
+ * Check if touch device
+ */
+export declare function isTouchDevice(): boolean;
+/**
+ * Check if WebGL is supported
+ */
+export declare function isWebGLSupported(): boolean;
+/**
+ * Get the aspect ratio of an image
+ */
+export declare function getImageAspectRatio(width: number, height: number): number;
+/**
+ * Calculate page dimensions based on container and aspect ratio
+ */
+export declare function calculatePageDimensions(containerWidth: number, containerHeight: number, pageAspectRatio: number, isDoublePage?: boolean): {
+    width: number;
+    height: number;
+};
+/**
+ * Preload an image
+ */
+export declare function preloadImage(src: string): Promise<HTMLImageElement>;
+/**
+ * Preload multiple images
+ */
+export declare function preloadImages(srcs: string[], onProgress?: (loaded: number, total: number) => void): Promise<HTMLImageElement[]>;
+/**
+ * Generate a unique ID
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Get element offset relative to document
+ */
+export declare function getElementOffset(element: HTMLElement): {
+    top: number;
+    left: number;
+};
+/**
+ * Request fullscreen for an element
+ */
+export declare function requestFullscreen(element: HTMLElement): Promise<void>;
+/**
+ * Exit fullscreen
+ */
+export declare function exitFullscreen(): Promise<void>;
+/**
+ * Check if currently in fullscreen mode
+ */
+export declare function isFullscreen(): boolean;
+/**
+ * Get fullscreen element
+ */
+export declare function getFullscreenElement(): Element | null;
+/**
+ * Format page number for display
+ */
+export declare function formatPageNumber(page: number, totalPages: number, offset?: number): string;
+/**
+ * Parse page number from URL hash
+ */
+export declare function getPageFromHash(prefix?: string): number | null;
+/**
+ * Set page number in URL hash
+ */
+export declare function setPageHash(page: number, prefix?: string): void;
+/**
+ * Clear URL hash
+ */
+export declare function clearHash(): void;
+/**
+ * Local storage helpers
+ */
+export declare const storage: {
+    get<T>(key: string, defaultValue: T): T;
+    set<T>(key: string, value: T): void;
+    remove(key: string): void;
+};
+/**
+ * Easing functions for animations
+ */
+export declare const easing: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    easeInQuart: (t: number) => number;
+    easeOutQuart: (t: number) => number;
+    easeInOutQuart: (t: number) => number;
+    easeInSine: (t: number) => number;
+    easeOutSine: (t: number) => number;
+    easeInOutSine: (t: number) => number;
+    easeInExpo: (t: number) => number;
+    easeOutExpo: (t: number) => number;
+    easeInOutExpo: (t: number) => number;
+};