Build Your Own Adapter

import { createLogoSoup } from "@sanity-labs/logo-soup";

// 1. Create an engine instance
const engine = createLogoSoup();

// 2. Subscribe — push snapshots into your framework's reactivity
const unsubscribe = engine.subscribe(() => {
  const snapshot = engine.getSnapshot();
  // yourFramework.setState(snapshot)
});

// 3. Process — call when options change
engine.process({ logos: ["a.svg", "b.svg"], baseSize: 48 });

// 4. Destroy — call on teardown
unsubscribe();
engine.destroy();

// use-logo-soup.ts
import { useRef, useCallback, useEffect } from "preact/hooks";
import { useSyncExternalStore } from "preact/compat";
import { createLogoSoup } from "@sanity-labs/logo-soup";
import type { ProcessOptions, LogoSoupState } from "@sanity-labs/logo-soup";

const SERVER_SNAPSHOT: LogoSoupState = {
  status: "idle",
  normalizedLogos: [],
  error: null,
};

export function useLogoSoup(options: ProcessOptions) {
  const engineRef = useRef(createLogoSoup());
  const engine = engineRef.current;

  const subscribe = useCallback(
    (cb: () => void) => engine.subscribe(cb),
    [engine],
  );
  const getSnapshot = useCallback(() => engine.getSnapshot(), [engine]);

  const state = useSyncExternalStore(
    subscribe,
    getSnapshot,
    () => SERVER_SNAPSHOT,
  );

  useEffect(() => {
    engine.process(options);
  }, [engine, options.logos, options.baseSize, options.scaleFactor]);

  useEffect(() => () => engine.destroy(), [engine]);

  return state;
}

// usage
import { useLogoSoup } from "./use-logo-soup";
import { getVisualCenterTransform } from "@sanity-labs/logo-soup";

function LogoStrip() {
  const { status, normalizedLogos } = useLogoSoup({
    logos: ["/logos/acme.svg", "/logos/globex.svg"],
  });

  if (status !== "ready") return null;

  return (
    <div style={{ textAlign: "center" }}>
      {normalizedLogos.map((logo) => (
        <img
          key={logo.src}
          src={logo.src}
          alt={logo.alt}
          width={logo.normalizedWidth}
          height={logo.normalizedHeight}
          style={{
            transform: getVisualCenterTransform(logo, "visual-center-y"),
          }}
        />
      ))}
    </div>
  );
}

// logo-soup-controller.ts
import { type ReactiveController, type ReactiveControllerHost } from "lit";
import { createLogoSoup } from "@sanity-labs/logo-soup";
import type { ProcessOptions, LogoSoupState } from "@sanity-labs/logo-soup";

export class LogoSoupController implements ReactiveController {
  private engine = createLogoSoup();
  private unsubscribe: (() => void) | null = null;

  state: LogoSoupState = this.engine.getSnapshot();

  constructor(private host: ReactiveControllerHost) {
    host.addController(this);
  }

  hostConnected() {
    this.unsubscribe = this.engine.subscribe(() => {
      this.state = this.engine.getSnapshot();
      this.host.requestUpdate();
    });
  }

  hostDisconnected() {
    this.unsubscribe?.();
    this.engine.destroy();
  }

  process(options: ProcessOptions) {
    this.engine.process(options);
  }
}

// usage
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { getVisualCenterTransform } from "@sanity-labs/logo-soup";
import { LogoSoupController } from "./logo-soup-controller";

@customElement("logo-strip")
export class LogoStrip extends LitElement {
  private soup = new LogoSoupController(this);

  @property({ type: Array }) logos: string[] = [];
  @property({ type: Number }) baseSize = 48;

  updated(changed: Map<string, unknown>) {
    if (changed.has("logos") || changed.has("baseSize")) {
      this.soup.process({ logos: this.logos, baseSize: this.baseSize });
    }
  }

  render() {
    if (this.soup.state.status !== "ready") return html``;

    return html`
      <div style="text-align: center">
        ${this.soup.state.normalizedLogos.map(
          (logo) => html`
            <img
              src=${logo.src}
              alt=${logo.alt}
              width=${logo.normalizedWidth}
              height=${logo.normalizedHeight}
              style="display:inline-block;margin:0 14px;transform:${getVisualCenterTransform(
                logo,
                "visual-center-y",
              ) ?? "none"}"
            />
          `,
        )}
      </div>
    `;
  }
}