React SDK

The React SDK provides ready-to-use components and hooks for displaying company logos in React applications.

Installation

npm install @quikturn/logos @quikturn/logos-react

Peer dependencies: React >= 18, React DOM >= 18

Provider Setup

Wrap your app (or a subtree) in QuikturnProvider to set a default token for all child components:

import { QuikturnProvider } from "@quikturn/logos-react";

function App() {
  return (
    <QuikturnProvider token="pk_live_xxx">
      {/* All QuikturnLogo components inherit this token */}
      <YourApp />
    </QuikturnProvider>
  );
}

Provider props:

Prop	Type	Description
`token`	`string`	Default publishable key for all children
`baseUrl`	`string?`	Override the base URL

Individual components can override the provider's token via their own token prop.

Components

QuikturnLogo

Renders a single company logo as an <img> tag.

import { QuikturnLogo } from "@quikturn/logos-react";

<QuikturnLogo domain="stripe.com" size={64} />
<QuikturnLogo domain="github.com" size={128} format="webp" theme="dark" />
<QuikturnLogo domain="linear.app" greyscale loading="lazy" />

Props:

Prop	Type	Default	Description
`domain`	`string`	required	Company domain
`token`	`string?`	Provider token	Override API key
`size`	`number?`	`128`	Pixel width
`format`	`"png" \| "jpeg" \| "webp" \| "avif"`	—	Image format
`greyscale`	`boolean?`	`false`	Desaturate
`theme`	`"light" \| "dark"`	—	Background variant
`alt`	`string?`	`"{domain} logo"`	Alt text
`href`	`string?`	—	Wraps in `<a>` tag
`className`	`string?`	—	CSS class
`style`	`CSSProperties?`	—	Inline styles
`loading`	`"lazy" \| "eager"`	—	Native loading
`onError`	`(e: Event) => void`	—	Error handler
`onLoad`	`(e: Event) => void`	—	Load handler

QuikturnLogoCarousel

Animated horizontal or vertical logo carousel with smooth infinite scrolling.

import { QuikturnLogoCarousel } from "@quikturn/logos-react";

<QuikturnLogoCarousel
  domains={[
    "stripe.com", "github.com", "vercel.com",
    "linear.app", "figma.com", "notion.so",
  ]}
  speed={120}
  direction="left"
  pauseOnHover
  fadeOut
  logoHeight={28}
  gap={32}
/>

Props:

Prop	Type	Default	Description
`domains`	`string[]?`	—	Simple list of domains
`logos`	`LogoConfig[]?`	—	Full control per logo
`speed`	`number?`	`120`	Pixels per second
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	Scroll direction
`pauseOnHover`	`boolean?`	`false`	Pause on mouse hover
`hoverSpeed`	`number?`	—	Speed when hovering
`logoHeight`	`number?`	`28`	Logo height in px
`gap`	`number?`	`32`	Spacing between logos
`width`	`string \| number`	—	Container width
`fadeOut`	`boolean?`	`false`	Fade edges
`fadeOutColor`	`string?`	`"white"`	Fade overlay color
`scaleOnHover`	`boolean?`	`false`	Scale effect
`renderItem`	`(logo, i) => ReactNode`	—	Custom render
`className`	`string?`	—	CSS class
`ariaLabel`	`string?`	—	ARIA label

Features:

Smooth infinite scroll animation
Responsive auto-scaling
Pause/resume on hover
Fade overlays on edges
Custom rendering via renderItem
Accessible with ARIA labels

QuikturnLogoGrid

CSS Grid layout for displaying logos in columns.

import { QuikturnLogoGrid } from "@quikturn/logos-react";

<QuikturnLogoGrid
  domains={["stripe.com", "github.com", "vercel.com", "linear.app"]}
  columns={4}
  gap={24}
  logoSize={64}
/>

Props:

Prop	Type	Default	Description
`domains`	`string[]?`	—	List of domains
`logos`	`LogoConfig[]?`	—	Full control per logo
`columns`	`number?`	`4`	Grid columns
`gap`	`number?`	`24`	Gap between items
`logoSize`	`number?`	—	Per-logo size
`renderItem`	`(logo, i) => ReactNode`	—	Custom render
`className`	`string?`	—	CSS class
`ariaLabel`	`string?`	—	ARIA label

Hooks

`useLogoUrl(domain, options?)`

Returns a logo URL string for use in custom components:

import { useLogoUrl } from "@quikturn/logos-react";

function CustomLogo({ domain }: { domain: string }) {
  const url = useLogoUrl(domain, { size: 128, format: "webp" });

  return (
    <div className="logo-card">
      <img src={url} alt={`${domain} logo`} />
    </div>
  );
}

Full Example

A partner logos section with carousel and grid:

import {
  QuikturnProvider,
  QuikturnLogo,
  QuikturnLogoCarousel,
  QuikturnLogoGrid,
} from "@quikturn/logos-react";

const partners = [
  "stripe.com", "github.com", "vercel.com",
  "linear.app", "figma.com", "notion.so",
  "slack.com", "shopify.com",
];

export default function PartnersPage() {
  return (
    <QuikturnProvider token={process.env.NEXT_PUBLIC_QUIKTURN_KEY!}>
      {/* Hero: animated carousel */}
      <section>
        <h2>Trusted by leading companies</h2>
        <QuikturnLogoCarousel
          domains={partners}
          speed={100}
          pauseOnHover
          fadeOut
          logoHeight={32}
        />
      </section>

      {/* Grid: all partners */}
      <section>
        <h2>Our Partners</h2>
        <QuikturnLogoGrid
          domains={partners}
          columns={4}
          gap={32}
          logoSize={80}
        />
      </section>

      {/* Individual logo with link */}
      <QuikturnLogo
        domain="stripe.com"
        size={128}
        href="https://stripe.com"
        alt="Stripe"
      />
    </QuikturnProvider>
  );
}

Attribution

On the Free tier, the SDK components automatically render a small attribution badge. Upgrade to Launch or higher to remove it.

Next Steps

Browser Client — Lower-level browser API
Server Client — Node.js batch operations and streaming
Web Component — Framework-agnostic alternative

On this page