Function MiniCard

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

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

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

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' }}
    />
  );
}
Copy

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>
      )}
    />
  );
}
Copy

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
      }}
    />
  );
}
Copy