Building a Production-Ready Company Logo Component in React

// components/company-logo.tsx
'use client';

import { useState, useCallback, memo } from 'react';
import { cn } from '@/lib/utils';

type LogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
type LogoTheme = 'light' | 'dark' | 'auto';
type FallbackType = 'initials' | 'icon' | 'none';

interface CompanyLogoProps {
  /** Company domain, e.g. "stripe.com" */
  domain: string;
  /** Display size preset */
  size?: LogoSize;
  /** Override display pixel size */
  px?: number;
  /** Logo color variant */
  theme?: LogoTheme;
  /** What to show on error */
  fallback?: FallbackType;
  /** Tailwind classes */
  className?: string;
  /** Accessible label — defaults to "${domain} logo" */
  label?: string;
  /** API token */
  token?: string;
}

const SIZE_MAP: Record<LogoSize, { display: number; api: number }> = {
  xs:  { display: 16,  api: 32  },
  sm:  { display: 24,  api: 48  },
  md:  { display: 40,  api: 80  },
  lg:  { display: 56,  api: 112 },
  xl:  { display: 80,  api: 160 },
  '2xl': { display: 120, api: 240 },
};

export const CompanyLogo = memo(function CompanyLogo({
  domain,
  size = 'md',
  px,
  theme = 'auto',
  fallback = 'initials',
  className,
  label,
  token,
}: CompanyLogoProps) {
  const [status, setStatus] = useState<'idle' | 'loading' | 'loaded' | 'error'>('loading');

  const { display, api } = SIZE_MAP[size];
  const displayPx = px ?? display;
  const apiPx = px ? px * 2 : api;

  const params = new URLSearchParams({
    size: String(apiPx),
    format: 'webp',
    ...(theme !== 'auto' && { theme }),
    ...(token && { token }),
  });

  const src = `https://img.logorouter.com/${domain}?${params}`;
  const altText = label ?? `${domain} logo`;

  const handleLoad = useCallback(() => setStatus('loaded'), []);
  const handleError = useCallback(() => setStatus('error'), []);

  return (
    <div
      role="img"
      aria-label={altText}
      className={cn(
        'relative flex-shrink-0 overflow-hidden rounded-md bg-muted/50 flex items-center justify-center',
        className
      )}
      style={{ width: displayPx, height: displayPx }}
    >
      {/* Skeleton */}
      {status === 'loading' && (
        <div
          className="absolute inset-0 animate-pulse rounded-md bg-muted"
          aria-hidden="true"
        />
      )}

      {/* Logo image */}
      {status !== 'error' && (
        <img
          src={src}
          alt={altText}
          width={displayPx}
          height={displayPx}
          className={cn(
            'absolute inset-0 w-full h-full object-contain transition-opacity duration-200',
            status === 'loaded' ? 'opacity-100' : 'opacity-0'
          )}
          onLoad={handleLoad}
          onError={handleError}
          loading="lazy"
          decoding="async"
          crossOrigin="anonymous"
        />
      )}

      {/* Fallback */}
      {status === 'error' && fallback === 'initials' && (
        <InitialsFallback domain={domain} size={displayPx} />
      )}
    </div>
  );
});

function InitialsFallback({ domain, size }: { domain: string; size: number }) {
  // Use the second-level domain for initials: "stripe.com" → "ST"
  const name = domain.split('.')[0] ?? domain;
  const initials = name.slice(0, 2).toUpperCase();
  const fontSize = Math.max(10, Math.round(size * 0.38));

  return (
    <span
      className="font-semibold text-muted-foreground select-none"
      style={{ fontSize }}
      aria-hidden="true"
    >
      {initials}
    </span>
  );
}

// Usage examples

// Basic
<CompanyLogo domain="stripe.com" />

// Large with dark mode variant
<CompanyLogo domain="stripe.com" size="xl" theme="dark" />

// Custom pixel size with fallback disabled
<CompanyLogo domain="acme.io" px={48} fallback="none" />

// With API key for higher resolution
<CompanyLogo
  domain="notion.so"
  size="2xl"
  token={process.env.NEXT_PUBLIC_LOGOROUTER_KEY}
/>

// lib/domain.ts
export function normalizeDomain(input: string): string {
  try {
    // Handle full URLs
    if (input.startsWith('http')) {
      return new URL(input).hostname.replace(/^www\./, '');
    }
    // Handle email addresses
    if (input.includes('@')) {
      return input.split('@')[1].replace(/^www\./, '');
    }
    // Handle bare domains
    return input.replace(/^www\./, '').split('/')[0].toLowerCase();
  } catch {
    return input.toLowerCase().trim();
  }
}

// normalize('https://www.stripe.com/payments') → 'stripe.com'
// normalize('user@stripe.com') → 'stripe.com'
// normalize('www.stripe.com') → 'stripe.com'