Variable CardMediaConst

Type Declaration

• • (props: CardMediaPropsExtend): Element

  • A customized Material UI Card Media component with keyboard accessibility support.

    Parameters

    • props: CardMediaPropsExtend

      The properties for the Card Media element

    Returns Element

    A rendered Card Media element

    Component

    Example

    // Basic image usage
    <CardMedia
      component="img"
      src="/path/to/image.jpg"
      alt="Description of image"
    />
    
    // With click handler
    <CardMedia
      src="/path/to/image.jpg"
      alt="Clickable image"
      click={() => handleImageClick()}
    />
    
    // Video component
    <CardMedia
      cardComponent="video"
      src="/path/to/video.mp4"
      alt="Video description"
    />
    
    // GeoView implementation with lighbox
    <CardMedia
      key={generateId()}
      sx={{ ...sxClasses.featureInfoItemValue, cursor: 'pointer' }}
      alt={`${alias} ${index}`}
      className={`returnLightboxFocusItem-${index}`}
      src={item}
      tabIndex={0}
      onClick={() => onInitLightBox(featureInfoItem.value as string, featureInfoItem.alias, index)}
      onKeyDown={(event: React.KeyboardEvent) => {
      if (event.key === 'Enter') {
         onInitLightBox(featureInfoItem.value as string, `${index}_${featureInfoItem.alias}`, index);
       }
      }}
    />
    Copy

    Note

    For performance optimization in cases of frequent parent re-renders, consider wrapping this component with React.memo at the consumption level.

    See

    https://mui.com/material-ui/react-card/#media