Lime Web Components API Documentation - v7.4.0
    Preparing search index...

    Interface StateOptions

    Configuration options for state subscriptions.

    These options allow you to transform and filter state updates before they reach your callback. Map functions transform the data, while filter functions determine whether the callback should be invoked at all.

    import { LimeObject, StateOptions } from '@limetech/lime-web-components';

    const options: StateOptions = {
        // Extract and transform specific parts of the state
        map: [
            (state) => state.objects,
            (objects: LimeObject[]) =>
                objects.map((object) => ({
                    id: object.id,
                    name: object.getValue('name'),
                })),
        ],
        // Only notify when the conditions are met
        filter: [
            (objects) => objects.length > 0,
            (objects) =>
                objects.some((item: { name: string }) => item.name === 'Admin'),
        ],
    };
    interface StateOptions {
        filter?: ((state: any) => boolean)[];
        map?: ((state: any) => any)[];
    }

    Hierarchy (View Summary)

    Index

    Properties

    filter? map?

    Properties

    filter?: ((state: any) => boolean)[]

    List of predicate functions that must all return true for updates to be emitted.

    Filters are evaluated after map transformations. If any filter returns false, the callback is not invoked for that state change. Useful for preventing unnecessary updates. Functions are bound to the web component instance.

    import { StateOptions } from '@limetech/lime-web-components';

    const options: StateOptions = {
        filter: [
            (state) => state !== null, // Ignore null states
            (state) => state.isReady, // Only when ready
            (state) => state.items.length > 0, // Only when it has items
        ],
    };
    map?: ((state: any) => any)[]

    List of transformation functions applied sequentially to the state.

    Each function receives the output of the previous function (or the raw state for the first function). Use this to extract, transform, or compute derived values from the state. Functions are bound to the web component instance.

    import { StateOptions } from '@limetech/lime-web-components';

    type Order = { pending: boolean };

    // The callback receives the output of the last function, so here: the count of
    // pending orders.
    const options: StateOptions = {
        map: [
            (state) => state.orders, // Extract orders
            (orders: Order[]) => orders.filter((order) => order.pending), // Pending only
            (pending: Order[]) => pending.length, // Get count
        ],
    };

    Settings

    Member Visibility

    On This Page

    Properties