@hanamura/react-containers/dist/components/Reel.d.ts

Flexible container components for React

import { ContainerProps, DefaultSpacingType, CommonContainerOptions } from '../core';
/**
 * Options for configuring the Reel component
 */
export interface ReelOptions<S extends string | number = DefaultSpacingType> extends CommonContainerOptions<S> {
    /** Space between items */
    gap?: S;
    /** Enable or disable scrollbar visibility */
    hideScrollbar?: boolean;
    /**
     * Control scroll snapping behavior:
     * - 'none': No snapping
     * - 'mandatory': Always snap to snap points
     * - 'proximity': Snap to snap points if nearby
     */
    snap?: 'none' | 'mandatory' | 'proximity';
    /**
     * Number of columns or exact column width:
     * - Number: Divide container into n equal columns (e.g., 3 = three equal columns)
     * - String: Use as exact column width (e.g., '150px', '10rem')
     */
    columns?: string | number;
}
/**
 * Props for the Reel component
 */
export type ReelProps<K extends string = string, S extends string | number = DefaultSpacingType> = ContainerProps<K, ReelOptions<S>, S>;
/**
 * Reel component - creates a horizontally scrollable container
 *
 * Features:
 * - Horizontal scrolling with customizable behavior
 * - Optional scroll snapping
 * - Configurable gap between items
 * - Optional scrollbar visibility control
 * - Responsive settings based on breakpoints
 * - Customizable HTML element via 'as' prop
 */
export declare function Reel<K extends string = string, S extends string | number = DefaultSpacingType>({ children, options, queries, adaptiveOptions, fallback, className, style, as, ...rest }: ReelProps<K, S>): import("react/jsx-runtime").JSX.Element;