effex-monorepo
    Preparing search index...

    Interface EachConfig<A, E, R>

    Configuration for the each control flow (DOM-specific with animation support).

    interface EachConfig<A, E = never, R = never> {
        animate?: ListAnimationOptions;
        container?: () => Element<HTMLElement | SVGElement, never, never>;
        intro?: boolean;
        key: (item: A) => string;
        render: (
            item: Readable<A>,
            index: Readable<number>,
        ) => Element<HTMLElement | SVGElement, E, R>;
    }

    Type Parameters

    • A
    • E = never
    • R = never
    Index

    Properties

    animate? container? intro? key render

    Properties

    animate?: ListAnimationOptions

    Optional animation configuration

    container?: () => Element<HTMLElement | SVGElement, never, never>

    Optional custom container element. If not provided, defaults to a div with display: contents.

    intro?: boolean

    Re-animate SSR/SSG-rendered items on hydration. By default each attaches handlers to pre-existing DOM without re-running enter animations (right default for content lists — you don't want every feed re-animating on every page load). Set intro: true for decorative sequences (headline letter cascades, opening scenes) where the animation is the point and skipping it on hydration defeats the purpose.

    There's a brief visual flash between the SSR paint and hydration applying the enterFrom state. To eliminate it, hide the container in CSS until hydration completes (e.g. visibility: hidden on a class you toggle from your client entry). A first-class FOUC-prevention mechanism is planned for a follow-up.

    Respects prefers-reduced-motion via runEnterAnimation.

    key: (item: A) => string

    Function to extract a unique key from each item

    render: (
        item: Readable<A>,
        index: Readable<number>,
    ) => Element<HTMLElement | SVGElement, E, R>

    Function to render each item.

    Type Declaration

      • (
            item: Readable<A>,
            index: Readable<number>,
        ): Element<HTMLElement | SVGElement, E, R>

      • Parameters

        • item: Readable<A>

          Readable for the item data (updates when item changes)

        • index: Readable<number>

          Readable for the item's position (updates when items reorder)

        Returns Element<HTMLElement | SVGElement, E, R>

    Settings

    Member Visibility

    On This Page

    Properties