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

    Interface VideoGridRenderProps

    Render props for advanced VideoGrid customization.

    Render props allow you to customize how tiles are rendered and add custom UI elements without modifying the core component.

    // Add custom badges to tiles
    <VideoGrid
      renderProps={{
        renderTileWrapper: (userId, isLocal, defaultContent) => (
          <Box sx={{ position: 'relative' }}>
            {defaultContent}
            {!isLocal && <CustomBadge userId={userId} />}
          </Box>
        ),
      }}
    />

    // Custom empty state when waiting for participants
    <VideoGrid
      renderProps={{
        renderEmptyState: () => (
          <Box sx={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Typography>Waiting for others to join...</Typography>
          </Box>
        ),
      }}
    />
    interface VideoGridRenderProps {
        renderEmptyState?: () => ReactNode;
        renderTileWrapper?: (
            userId: string,
            isLocal: boolean,
            defaultContent: ReactNode,
        ) => ReactNode;
    }
    Index

    Properties

    renderEmptyState? renderTileWrapper?

    Properties

    renderEmptyState?: () => ReactNode

    Custom renderer for the empty state (no remote participants). The local tile is still rendered; this adds an overlay.

    Type Declaration

      • (): ReactNode

      • Returns ReactNode

        Custom JSX for the empty state overlay

    renderTileWrapper?: (
        userId: string,
        isLocal: boolean,
        defaultContent: ReactNode,
    ) => ReactNode

    Custom renderer for wrapping each tile. Use this to add badges, click handlers, or other decorations around tiles.

    Type Declaration

      • (userId: string, isLocal: boolean, defaultContent: ReactNode): ReactNode

      • Parameters

        • userId: string

          The participant's user ID ('local' for local tile)

        • isLocal: boolean

          Whether this is the local user's tile

        • defaultContent: ReactNode

          The default tile content to render

        Returns ReactNode

        Custom JSX wrapping or replacing the default content

    Settings

    Member Visibility

    On This Page

    Properties