MediaSFU ReactJS
    Preparing search index...

    Variable MiniCardConst

    MiniCard: React.FC<MiniCardOptions> = ...

    MiniCard displays either participant initials or a profile image inside a small, reusable card.

    This lightweight component is commonly used as a fallback for participant avatars when no full image is available. It supports:

    • Initials display with customizable font size and styling
    • Profile image display with rounded or square corners
    • Custom render hooks for container, image, and initials
    • Extensive styling via props and HTML attributes
    • Override patterns for use in MediaSFU UI components

    The properties for the MiniCard component.

    The participant's initials to display (e.g., "JD" for John Doe). Shown when no imageSource is provided.

    Font size for the initials text.

    Custom styles for the card container.

    Source URL for the participant's profile image. Takes precedence over initials.

    Whether to apply rounded corners to the image.

    Custom styles for the image element.

    HTML props for the main container (className, style, etc.).

    HTML props for the image container.

    HTML props for the image element.

    HTML props for the initials container.

    HTML props for the initials text element.

    Custom render function for the container. Receives { defaultContainer, isImage }.

    Custom render function for the image. Receives { defaultImage, imageSource }.

    Custom render function for the initials. Receives { defaultInitials, initials }.

    The rendered MiniCard component.

    Basic Usage (Initials)

    import React from 'react';
    import { MiniCard } from 'mediasfu-reactjs';

    function App() {
      return (
        <MiniCard
          initials="JD"
          fontSize={16}
          customStyle={{ backgroundColor: 'blue', color: 'white' }}
        />
      );
    }

    Basic Usage (Profile Image)

    import React from 'react';
    import { MiniCard } from 'mediasfu-reactjs';

    function App() {
      return (
        <MiniCard
          imageSource="https://example.com/avatar.jpg"
          roundedImage={true}
          imageStyle={{ border: '2px solid gold' }}
        />
      );
    }

    Custom Initials Renderer

    import React from 'react';
    import { MiniCard } from 'mediasfu-reactjs';

    function App() {
      return (
        <MiniCard
          initials="AB"
          renderInitials={({ defaultInitials, initials }) => (
            <div style={{
              background: 'linear-gradient(45deg, purple, pink)',
              borderRadius: '50%',
              padding: 10,
              color: 'white',
              fontWeight: 'bold'
            }}>
              {initials}
            </div>
          )}
        />
      );
    }

    Using in uiOverrides (MediasfuGeneric example)

    import React from 'react';
    import { MediasfuGeneric, MiniCard } from 'mediasfu-reactjs';

    function App() {
      const CustomMiniCard = (props: any) => (
        <MiniCard
          {...props}
          fontSize={18}
          roundedImage={false}
          renderContainer={({ defaultContainer, isImage }) => (
            <div style={{
              border: '3px solid cyan',
              boxShadow: '0 0 10px cyan',
              padding: 5,
              borderRadius: isImage ? 0 : '50%'
            }}>
              {defaultContainer}
            </div>
          )}
        />
      );

      return (
        <MediasfuGeneric
          useLocalUIMode={true}
          useSeed={true}
          seedData={mySeedData}
          uiOverrides={{
            MiniCard: CustomMiniCard
          }}
        />
      );
    }

    Settings

    Member Visibility