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

    Interface RoomCardProps

    Props for the RoomCard component. Displays a single stored room as a card with actions.

    <RoomCard
      room={storedRoom}
      onStart={(room) => joinRoom(room.roomName)}
      onDelete={(room) => deleteRoom(room.alias)}
      onSettings={(room) => openSettings(room)}
    />
    interface RoomCardProps {
        cardIcon?: ReactNode;
        cardVariant?: "owner" | "participant";
        categoryBadge?: { icon?: ReactNode; label: string };
        colors?: Partial<RoomCardColors>;
        editLabel?: string;
        headerGradient?: [string, string];
        headerIcon?: ReactNode;
        icons?: Partial<RoomCardIcons>;
        isLive?: boolean;
        isSelected?: boolean;
        labels?: Partial<RoomCardLabels>;
        layout?: "card" | "hero";
        nextSession?: string;
        nextSessionHighlight?: boolean;
        onDelete?: (room: StoredRoom) => void;
        onEdit?: (room: StoredRoom) => void;
        onEnable?: (room: StoredRoom) => void;
        onError?: (error: Error) => void;
        onlineCount?: number;
        onSelect?: (room: StoredRoom) => void;
        onSettings?: (room: StoredRoom) => void;
        onShare?: (room: StoredRoom) => void;
        onStart?: (room: StoredRoom) => void;
        ownerName?: string;
        resolveOnlineStatus?: (userId: string) => boolean;
        resolveTargetUserName?: (userId: string) => string | undefined;
        room: StoredRoom;
        showDescription?: boolean;
        showFeatureBadges?: boolean;
        showFooterStats?: boolean;
        showOverflowMenu?: boolean;
        showSettingsMenuItem?: boolean;
        showTargetUserIds?: boolean;
        styles?: Partial<RoomCardStyles>;
    }
    Index

    Properties

    cardIcon? cardVariant? categoryBadge? colors? editLabel? headerGradient? headerIcon? icons? isLive? isSelected? labels? layout? nextSession? nextSessionHighlight? onDelete? onEdit? onEnable? onError? onlineCount? onSelect? onSettings? onShare? onStart? ownerName? resolveOnlineStatus? resolveTargetUserName? room showDescription? showFeatureBadges? showFooterStats? showOverflowMenu? showSettingsMenuItem? showTargetUserIds? styles?

    Properties

    cardIcon?: ReactNode

    Custom icon to render instead of the default room-type icon block (e.g., an avatar)

    cardVariant?: "owner" | "participant"

    Card role variant — controls footer content

    'owner'
    categoryBadge?: { icon?: ReactNode; label: string }

    Category badge shown top-left in hero header

    colors?: Partial<RoomCardColors>

    Custom colors for theming

    editLabel?: string

    Label for the edit menu item

    headerGradient?: [string, string]

    Gradient colors for hero header [startColor, endColor]

    headerIcon?: ReactNode

    Watermark icon rendered centered in hero header

    icons?: Partial<RoomCardIcons>

    Custom icons to replace defaults

    isLive?: boolean

    Whether this room is currently live (has an active session). Shows a live indicator on the card.

    isSelected?: boolean

    Whether this card is currently selected

    labels?: Partial<RoomCardLabels>

    Custom labels for i18n support

    layout?: "card" | "hero"

    Card layout variant

    'card'
    nextSession?: string

    Next scheduled session label, displayed bottom-right in the hero header

    nextSessionHighlight?: boolean

    When true, the next session label is highlighted (e.g., for imminent sessions)

    onDelete?: (room: StoredRoom) => void

    Called when the delete button is clicked

    onEdit?: (room: StoredRoom) => void

    Called when the edit button is clicked in the overflow menu

    onEnable?: (room: StoredRoom) => void

    Called when the Enable button is clicked on a disabled room.

    onError?: (error: Error) => void

    Callback when an error occurs (e.g., clipboard copy failure)

    onlineCount?: number

    Number of online members (shown in footer)

    onSelect?: (room: StoredRoom) => void

    Called when the card is selected (clicked)

    onSettings?: (room: StoredRoom) => void

    Called when the settings button is clicked

    onShare?: (room: StoredRoom) => void

    Called when the share button is clicked. Only shown when room is enabled and guest link is active.

    onStart?: (room: StoredRoom) => void

    Called when the start/join button is clicked

    ownerName?: string

    Owner display name shown below the room title

    resolveOnlineStatus?: (userId: string) => boolean

    Resolve whether a target user ID is currently online. Used to show online indicators on user chips.

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

    Resolve a display name for a target user ID. When provided, the returned string is shown on chips instead of the raw ID.

    room: StoredRoom

    The stored room data to display

    showDescription?: boolean

    Whether to show the room description from metadata

    true
    showFeatureBadges?: boolean

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

    true
    showFooterStats?: boolean

    Whether to show the footer stats row (online count, owner name, live badge)

    true
    showOverflowMenu?: boolean

    Whether to show the overflow (three-dot) menu

    true
    showSettingsMenuItem?: boolean

    Whether to show the built-in Settings menu item in the overflow menu

    true
    showTargetUserIds?: boolean

    Show target user IDs from room metadata on the card

    false
    styles?: Partial<RoomCardStyles>

    Custom styles for layout customization

    Settings

    Member Visibility

    On This Page

    Properties