@egjs/flicking/dist/reactive/index.d.ts

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

import { ReactiveObject, ReactiveSetupAdapter } from "@cfcs/core";
import Flicking from "../Flicking";
/**
 * Reactive object type that combines state and methods for Flicking
 * @remarks
 * This type provides reactive state properties and methods that automatically update
 * when the Flicking instance state changes.
 * @see {@link https://naver.github.io/egjs-flicking/Demos#reactive-api-demo}
 * @example
 * ```jsx
 *   const flickingRef = React.useRef(null);
 *   const {
 *     progress
 *   } = useFlickingReactiveAPI(flickingRef);
 *  ```
 */
export declare type FlickingReactiveObject = ReactiveObject<FlickingReactiveState & FlickingReactiveMethod>;
/**
 * Reactive state properties for Flicking
 */
export interface FlickingReactiveState {
    /** Whether Flicking has reached the first panel */
    isReachStart: boolean;
    /** Whether Flicking has reached the last panel */
    isReachEnd: boolean;
    /** Total number of panels */
    totalPanelCount: number;
    /** Current active panel index */
    currentPanelIndex: number;
    /** Overall scroll progress percentage (0-100) */
    progress: number;
    /** Panel progress with decimal values */
    indexProgress: number;
}
/**
 * Reactive methods for Flicking
 */
export interface FlickingReactiveMethod {
    /**
     * Move to a specific panel index
     * @param i - Target panel index
     * @returns Promise that resolves when movement is complete
     */
    moveTo: (i: number) => Promise<void>;
}
/**
 * Data required for reactive API setup
 */
export interface FlickingReactiveData {
    /** Flicking instance to connect */
    flicking?: Flicking;
    /** Flicking options used for initialization */
    options?: FlickingReactiveAPIOptions;
}
/**
 * Options for Flicking reactive API that help optimize initial rendering in SSR scenarios
 * @remarks
 * These options allow you to set initial state values before the Flicking instance is fully initialized,
 * preventing unnecessary re-renders when the actual Flicking state is applied.
 * @example
 * ```js
 * const options = {
 *   defaultIndex: 2,
 *   totalPanelCount: 5
 * };
 * const reactiveObj = connectFlickingReactiveAPI(flicking, options);
 * ```
 */
export interface FlickingReactiveAPIOptions {
    /**
     * Initial panel index to start with. This sets the currentPanelIndex and indexProgress initial values.
     * @remarks
     * Also affects isReachStart and isReachEnd initial value setting.
     * @defaultValue 0
     */
    defaultIndex?: number;
    /**
     * Total number of panels in the Flicking instance. This sets the totalPanelCount initial value
     * @remarks
     * Helps prevent layout shifts during SSR hydration.
     * @defaultValue 0
     */
    totalPanelCount?: number;
}
/**
 * Internal reactive API adapter for Flicking that manages state and event listeners
 * @remarks
 * This adapter is used internally by framework-specific packages (react-flicking, vue-flicking, etc.)
 * to provide reactive API support. Users rarely need to use this directly.
 * @param onInit - Callback when reactive object is initialized
 * @param onDestroy - Callback when reactive object is destroyed
 * @param setMethods - Function to set available methods
 * @returns Reactive object with Flicking state and methods
 */
declare const flickingReactiveAPIAdapter: ReactiveSetupAdapter<FlickingReactiveObject, FlickingReactiveState, "moveTo", FlickingReactiveData>;
/**
 * Connect Flicking instance to reactive API
 * @param flicking - Flicking instance to connect
 * @param options - Flicking options
 * @returns Reactive object with Flicking state and methods
 * @example
 * ```js
 * import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";
 *
 * const flicking = new Flicking("#el");
 * const reactiveObj = connectFlickingReactiveAPI(flicking);
 *
 * // Access reactive state
 * console.log("Current panel:", reactiveObj.currentPanelIndex);
 * console.log("Progress:", reactiveObj.progress + "%");
 * console.log("Is at start:", reactiveObj.isReachStart);
 * console.log("Is at end:", reactiveObj.isReachEnd);
 * console.log("Total panels:", reactiveObj.totalPanelCount);
 * console.log("Index progress:", reactiveObj.indexProgress);
 *
 * // Subscribe to state changes
 * reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
 *   console.log("Panel changed to:", nextValue);
 * });
 *
 * // Use reactive methods
 * reactiveObj.moveTo(2); // Move to third panel
 * ```
 */
declare const connectFlickingReactiveAPI: (flicking: Flicking, options?: FlickingReactiveAPIOptions | undefined) => FlickingReactiveObject;
export { flickingReactiveAPIAdapter, connectFlickingReactiveAPI };