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

    Interface ParticipantListRenderProps

    Render props for advanced ParticipantList customization.

    Use these to completely customize how participants, the header, or empty state are rendered while still leveraging the component's logic and state management.

    <ParticipantList
      renderProps={{
        renderParticipant: (participant, isLocal, defaultContent) => (
          <Box onClick={() => handleClick(participant.userId)}>
            {defaultContent}
            <CustomBadge role={participant.role} />
          </Box>
        ),
        renderEmptyState: () => (
          <Box sx={{ p: 4, textAlign: 'center' }}>
            <Typography>Waiting for participants to join...</Typography>
            <InviteButton />
          </Box>
        ),
        renderHeader: (title, count, defaultContent) => (
          <Box>
            {defaultContent}
            <SearchInput onChange={setFilter} />
          </Box>
        ),
      }}
    />
    interface ParticipantListRenderProps {
        renderEmptyState?: () => ReactNode;
        renderHeader?: (
            title: string,
            participantCount: number,
            defaultContent: ReactNode,
        ) => ReactNode;
        renderParticipant?: (
            participant: ParticipantInfo,
            isLocal: boolean,
            defaultContent: ReactNode,
        ) => ReactNode;
    }
    Index

    Properties

    renderEmptyState? renderHeader? renderParticipant?

    Properties

    renderEmptyState?: () => ReactNode

    Custom render function for the empty state.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom React content when no participants exist

    renderHeader?: (
        title: string,
        participantCount: number,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for the header.

    Type Declaration

      • (title: string, participantCount: number, defaultContent: ReactNode): ReactNode

      • Parameters

        • title: string

          The header title

        • participantCount: number

          Number of participants

        • defaultContent: ReactNode

          The default rendered header (can be used or replaced)

        Returns ReactNode

        Custom React content for the header

    renderParticipant?: (
        participant: ParticipantInfo,
        isLocal: boolean,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom render function for a participant item.

    Type Declaration

      • (
            participant: ParticipantInfo,
            isLocal: boolean,
            defaultContent: ReactNode,
        ): ReactNode

      • Parameters

        • participant: ParticipantInfo

          The participant data

        • isLocal: boolean

          Whether this is the local user

        • defaultContent: ReactNode

          The default rendered content (can be used or replaced)

        Returns ReactNode

        Custom React content for the participant

    Settings

    Member Visibility

    On This Page

    Properties