React SDK

scrift-react is a minimal layer for React 18+ apps: one provider for your API key, a <ScriftLogo /> component, and hooks. It does not add a runtime dependency on scrift-sdk; URL building and fetch for GET /v1/svg/{slug} are included so the package stays small.

Trademark and usage: You are responsible for how logos and colours are shown. Review scrift.app/legal and each brand’s guidelines. Scrift is not affiliated with the brands in the catalogue.

Install

npm install scrift-react
# peer: react, react-dom (18+)

npm: npmjs.com/package/scrift-react — current release v0.1.0 (use the published version from npm when you install).

This page (live): docs.scrift.app/docs/sdks/react

Source: monorepo sdk/react/ on GitHub.

Quick start

import { ScriftProvider, ScriftLogo } from 'scrift-react';

export function App() {
  return (
    <ScriftProvider apiKey={import.meta.env.VITE_SCRIFT_API_KEY}>
      <ScriftLogo slug="stripe" width={48} height={48} />
    </ScriftProvider>
  );
}

• Mount ScriftProvider once at the app root (or around a subtree) with a valid API key.
• Default ScriftLogo uses an <img src="…" /> pointing at the public SVG URL (no extra JS fetch for the asset). Browsers do not send custom headers on <img>; if the key must stay off the public URL, use inline, a same-origin proxy, or server rendering — see SVG / images and the package README.
• Optional provider props: baseUrl, timeoutMs (for inline fetches), fetch (tests or custom environments).

Hooks

• useScrift() — read config from the provider (apiKey, baseUrl, timeoutMs, fetch). Does not fetch by itself. Throws if ScriftProvider is missing.
• useScriftLogo({ slug, variant, inline }) — logo state: url, optional svg, status, error. Inline mode issues X-API-Key fetches. When the slug (or variant / inline flag) changes while a request is in flight, older responses are dropped so list UIs do not show the wrong brand.

ScriftLogo is built on useScriftLogo.

ScriftProvider and ScriftLogo (summary)

Area	Notes
ScriftProvider	Required: apiKey. Optional: baseUrl (default https://api.scrift.app), timeoutMs (default 30000 for inline), fetch.
ScriftLogo	Required: slug. Optional: variant (default mono), alt, width / height, className / style (no default styles in the package), inline (default false), loading (skeleton, inline only), renderError (omit = silent error UI).

Full prop tables, loading / error / inline theming examples, and buildScriftSvgUrl / fetchScriftSvgString are documented in the package README (kept in sync with the code).

Adopting in production React apps

For dashboards, lists, or subscription UIs that re-render rows with different slugs, use ScriftProvider at the app shell and either ScriftLogo or useScriftLogo in row components. The hook is designed for slug changes while a prior request is still in flight; integration tests in the package cover a late, stale first response. Real apps (e.g. internal or partner frontends) should add scrift-react as a normal dependency and run through your usual QA — that surfaces integration gaps quickly.

License

MIT. See the monorepo LICENSE at the root (if present in your checkout).