React Examples

React examples for rendering BrandQL logos with dark mode and strict fallbacks.

React

Examples using a small wrapper component plus direct URL usage.

If you need strict behavior, set fallback=false and handle a 404.

type BrandLogoProps = {
  domain: string
  size?: number
  variant?: 'default' | 'dark' | 'light' | 'transparent'
  format?: 'png' | 'jpg' | 'webp' | 'avif' | 'svg'
  fallback?: boolean
}

export function BrandLogo({
  domain,
  size = 64,
  variant = 'default',
  format,
  fallback = true,
}: BrandLogoProps) {
  const params = new URLSearchParams()
  if (variant !== 'default') params.set('variant', variant)
  if (format) params.set('format', format)
  if (size) params.set('size', String(size))
  if (!fallback) params.set('fallback', 'false')

  const query = params.toString()
  const src = `https://api.brandql.com/logo/${domain}${query ? `?${query}` : ''}`

  return <img src={src} alt={domain} width={size} height={size} />
}

export function CompanyCard({ domain }: { domain: string }) {
  return (
    <picture>
      <source
        media="(prefers-color-scheme: dark)"
        srcSet={`https://api.brandql.com/logo/${domain}?variant=dark`}
      />
      <img
        src={`https://api.brandql.com/logo/${domain}`}
        alt={domain}
        width={64}
        height={64}
      />
    </picture>
  )
}

JS and TS variants

export function BrandLogo({ domain }: { domain: string }) {
  return <img src={`https://api.brandql.com/logo/${domain}`} alt={domain} />
}

Was this page helpful?

React Examples

React

JS and TS variants

Related