react-sticky-kit/dist/index.d.ts

A lightweight, flexible React sticky container and item component library supporting multiple sticky modes, advanced layouts, and edge cases.

import { default as default_2 } from 'react';
import { JSX } from 'react/jsx-runtime';

export declare interface IStickyContainerProps extends default_2.HTMLAttributes<HTMLDivElement> {
    children: default_2.ReactNode;
    /**
     * The offset from the top of the viewport for sticky elements. Default is 0.
     */
    offsetTop?: number;
    /**
     * base z-index for sticky items. Default is 200. minimum z-index is 20.
     * * - When using the `replace` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` minus its index within the container.
     * * - When using the `stack` mode, the z-index of a `StickyItem` is calculated as `baseZIndex` plus its index.
     * * should be greater than number of sticky items in the container.
     * * for performance reasons, when baseZIndex is changed, the component will not re-render.
     * * use it when you need nest StickyContainer or need to change z-index of sticky items.
     */
    baseZIndex?: number;
    /**
     * Default sticky mode for the group. 'none' disables sticky behavior.
     */
    defaultMode?: 'replace' | 'stack' | 'none';
    /**
     * Callback triggered when the total height of all currently sticky items changes.
     * @param height The total height of all sticky items inside the container.
     */
    onStickyItemsHeightChange?: (height: number) => void;
    /**
     * Define the constraint for sticky behavior
     * - undefined (default): Sticky items will stop being sticky when StickyContainer leaves viewport
     * - 'none': No constraints, similar to CSS position:sticky behavior
     */
    constraint?: 'none';
}

export declare interface IStickyItemProps extends default_2.HTMLAttributes<HTMLDivElement> {
    children: default_2.ReactNode;
    /**
     * Sticky mode for this item. Defaults to the StickyContainer's mode if not specified.
     */
    mode?: IStickyMode;
}

/**
 * Sticky mode:
 * - 'replace': This item replaces the previous sticky item; its height is set to the previous sticky item's height.
 * - 'stack': This item stacks on top of previous sticky items; its height is set to 0.
 * - 'none': This item is not sticky.
 */
export declare type IStickyMode = 'replace' | 'stack' | 'none';

export declare function StickyContainer({ children, offsetTop, baseZIndex, onStickyItemsHeightChange, defaultMode, constraint, ...rest }: IStickyContainerProps): JSX.Element;

export declare function StickyItem({ mode, children, className, ...rest }: IStickyItemProps): JSX.Element;

export { }