Lime Web Components API Documentation - v6.24.0
    Preparing search index...

    Interface Device

    Service for detecting the current device viewport size category

    The Device service provides reactive methods to determine whether the current viewport size falls into desktop, tablet, or phone categories. This is useful for creating responsive components that adapt their UI based on available screen real estate.

    Since Device extends StateRepository, components can use the @State decorator to automatically re-render when the device size category changes (e.g., when the user resizes their browser window or rotates their device).

    const device = this.platform.get(PlatformServiceName.Device);

    if (device.isPhoneSize()) {
        return this.generateMobileExport();
    }

    return this.generateDesktopExport();

    const device = this.platform.get(PlatformServiceName.Device);

    if (device.isDesktopSize()) {
        columns = ['name', 'email', 'phone', 'address', 'status'];
    } else if (device.isTabletSize()) {
        columns = ['name', 'email', 'status'];
    } else {
        columns = ['name', 'status'];
    }
    interface Device {
        isDesktopSize(): boolean;
        isPhoneSize(): boolean;
        isTabletSize(): boolean;
        subscribe(
            callback: (...args: unknown[]) => void,
            options?: StateOptions,
        ): () => void;
    }

    Hierarchy (View Summary)

    Index

    Methods

    isDesktopSize isPhoneSize isTabletSize subscribe

    Methods

    • Check if the current viewport size is in the desktop category

      Desktop size typically indicates a large screen with ample horizontal space for full-featured layouts, multiple columns, and detailed information display.

      Returns boolean

      true if the viewport is desktop-sized, false otherwise

    • Check if the current viewport size is in the phone category

      Phone size typically indicates a small screen where compact layouts, single columns, and simplified navigation patterns are most appropriate.

      Returns boolean

      true if the viewport is phone-sized, false otherwise

    • Check if the current viewport size is in the tablet category

      Tablet size typically indicates a medium-sized screen where some layout adjustments may be needed compared to desktop, but more space is available than on phone screens.

      Returns boolean

      true if the viewport is tablet-sized, false otherwise

    • Subscribe to state changes with optional transformation and filtering.

      The subscription will immediately invoke the callback with the current state (if any), then continue to call it whenever the state changes. The map and filter options allow you to transform and selectively receive updates.

      Parameters

      • callback: (...args: unknown[]) => void

        Function called with state updates (after map/filter applied)

      • Optionaloptions: StateOptions

        Optional transformations and filters for the subscription

      Returns () => void

      Unsubscribe function - call this to stop receiving updates

      • Map functions are applied sequentially to transform the state
      • Filter functions must all return true for the callback to be invoked
      • Functions in map/filter arrays are bound to the component instance
      • Always store and call the unsubscribe function when component is destroyed
      // Basic subscription
      const unsubscribe = repository.subscribe((state) => {
          console.log('State updated:', state);
      });

      // With transformations
      const unsubscribe = repository.subscribe(
          (userName) => console.log('User:', userName),
          { map: [(state) => state.user?.name] }
      );

    Settings

    Member Visibility

    On This Page

    Methods