Hiyve Components - v1.0.0
    Preparing search index...

    Interface RoomsListProps

    Props for the RoomsList component. The top-level component for managing stored rooms.

    RoomsList orchestrates all sub-components (RoomCard, RoomSearchBar, CreateRoomDialog, RoomSettingsDialog, DeleteConfirmDialog) into a complete room management interface.

    // Basic usage
    <RoomsList
      userId="user-123"
      onStartRoom={(room) => navigate(`/room/${room.roomName}`)}
    />

    // Rebranded as workspaces
    <RoomsList
      userId="user-123"
      labels={{
        entity: { entity: 'Workspace', entityPlural: 'Workspaces', createEntity: 'Create Workspace' },
      }}
      onStartRoom={(room) => navigate(`/workspace/${room.roomName}`)}
      onCreateRoom={(room) => console.log('Created:', room.alias)}
    />
    interface RoomsListProps {
        collapsibleSearchBar?: boolean;
        colors?: Partial<RoomsColors>;
        defaultMetadata?: Record<string, unknown>;
        emptyStateContent?: ReactNode;
        fetchOptions?: { consumerOnly?: boolean; offlineOnly?: boolean };
        filterRoom?: (room: StoredRoom) => boolean;
        headerContent?: ReactNode;
        icons?: Partial<RoomsIcons>;
        labels?: Partial<RoomsLabels>;
        layout?: "card" | "compact";
        onCreateRoom?: (room: StoredRoom) => void;
        onDeleteRoom?: (alias: string) => void;
        onError?: (error: Error) => void;
        onSelectRoom?: (room: StoredRoom) => void;
        onSettingsRoom?: (room: StoredRoom) => void;
        onStartRoom?: (room: StoredRoom) => void;
        renderProps?: RoomsListRenderProps;
        resolveCardIcon?: (room: StoredRoom) => ReactNode;
        resolveIsLive?: (room: StoredRoom) => boolean;
        resolveOnlineStatus?: (userId: string) => boolean;
        resolveOwnerName?: (room: StoredRoom) => string | undefined;
        resolveTargetUserName?: (userId: string) => string | undefined;
        searchBarDefaultExpanded?: boolean;
        selectedRoom?: StoredRoom | null;
        showCreateButton?: boolean;
        showFeatureBadges?: boolean;
        showOverflowMenu?: boolean;
        showSearchBar?: boolean;
        showSettingsMenuItem?: boolean;
        showStaticOption?: boolean;
        showTargetUserIds?: boolean;
        showTargetUserIdsInSettings?: boolean;
        storageKey?: string;
        styles?: Partial<RoomsStyles>;
        userId: string;
    }
    Index

    Properties

    collapsibleSearchBar? colors? defaultMetadata? emptyStateContent? fetchOptions? filterRoom? headerContent? icons? labels? layout? onCreateRoom? onDeleteRoom? onError? onSelectRoom? onSettingsRoom? onStartRoom? renderProps? resolveCardIcon? resolveIsLive? resolveOnlineStatus? resolveOwnerName? resolveTargetUserName? searchBarDefaultExpanded? selectedRoom? showCreateButton? showFeatureBadges? showOverflowMenu? showSearchBar? showSettingsMenuItem? showStaticOption? showTargetUserIds? showTargetUserIdsInSettings? storageKey? styles? userId

    Properties

    collapsibleSearchBar?: boolean

    Wrap the search bar in a collapsible accordion

    false
    colors?: Partial<RoomsColors>

    Combined colors for all sub-components

    defaultMetadata?: Record<string, unknown>

    Default metadata merged into every new room created via the create dialog

    emptyStateContent?: ReactNode

    Custom content to display when there are no rooms

    fetchOptions?: { consumerOnly?: boolean; offlineOnly?: boolean }

    Options passed to fetchStoredRooms (e.g., { consumerOnly: true, offlineOnly: true } for read-only views)

    filterRoom?: (room: StoredRoom) => boolean

    Custom filter predicate applied before search/sort. Return true to include the room, false to exclude it.

    <RoomsList filterRoom={(room) => room.enabled !== false} />
    headerContent?: ReactNode

    Custom content to display in the header area

    icons?: Partial<RoomsIcons>

    Combined icons for all sub-components

    labels?: Partial<RoomsLabels>

    Combined labels for all sub-components

    layout?: "card" | "compact"

    Layout mode for the rooms list.

    • 'card' (default): full room cards in a grid
    • 'compact': slim rows matching the student list style
    'card'
    onCreateRoom?: (room: StoredRoom) => void

    Called after a new room is successfully created

    onDeleteRoom?: (alias: string) => void

    Called after a room is successfully deleted

    onError?: (error: Error) => void

    Callback when an error occurs during any operation

    onSelectRoom?: (room: StoredRoom) => void

    Called when a room card is selected (clicked)

    onSettingsRoom?: (room: StoredRoom) => void

    Called when edit is clicked from the card overflow menu. Adds an "Edit" menu item when provided.

    onStartRoom?: (room: StoredRoom) => void

    Called when a room's start/join button is clicked

    renderProps?: RoomsListRenderProps

    Render props for replacing individual layout sections

    resolveCardIcon?: (room: StoredRoom) => ReactNode

    Callback to resolve a custom icon for a room card (e.g., an owner avatar). Overrides the default room-type icon block.

    resolveIsLive?: (room: StoredRoom) => boolean

    Resolve whether a stored room is currently live (active session). Controls per-card start button visibility and live indicator.

    resolveOnlineStatus?: (userId: string) => boolean

    Resolve whether a target user ID is currently online. Passed through to RoomCard.

    resolveOwnerName?: (room: StoredRoom) => string | undefined

    Callback to resolve an owner display name for a room (e.g., from room.userId)

    resolveTargetUserName?: (userId: string) => string | undefined

    Resolve a display name for a target user ID. Passed through to RoomCard for chip labels.

    searchBarDefaultExpanded?: boolean

    Whether the accordion starts expanded (only used when collapsibleSearchBar is true)

    false
    selectedRoom?: StoredRoom | null

    Controlled selected room. When provided, RoomsList uses this instead of internal selection state.

    showCreateButton?: boolean

    Whether to show the create room button

    true
    showFeatureBadges?: boolean

    Whether to show feature badges (password, waiting room, offline) on room cards

    true
    showOverflowMenu?: boolean

    Whether to show the overflow (three-dot) menu on room cards

    true
    showSearchBar?: boolean

    Whether to show the search/filter bar

    true
    showSettingsMenuItem?: boolean

    Whether to show the built-in Settings menu item on room cards

    true
    showStaticOption?: boolean

    Whether to show the static room option in the create dialog

    true
    showTargetUserIds?: boolean

    Whether to show target user IDs on cards and in create/settings dialogs

    false
    showTargetUserIdsInSettings?: boolean

    Whether to show the target user IDs field in the settings dialog. Defaults to the value of showTargetUserIds.

    storageKey?: string

    localStorage key prefix for persisting sort, filter, and accordion state. When provided, useRoomFilters persists sort/filter and the accordion remembers its expanded/collapsed state.

    Storage keys: ${storageKey}-sort, ${storageKey}-filter, ${storageKey}-expanded.

    styles?: Partial<RoomsStyles>

    Combined styles for all sub-components

    userId: string

    User ID for room ownership and API operations

    Settings

    Member Visibility

    On This Page

    Properties