React

Use @bnomei/emdash-mika/react inside React islands that need Mika’s browser-safe public read client.

Important exports include:

• MikaProvider;
• MikaProviderProps;
• useMika();
• useMikaSellables();
• useMikaStock().

These hooks wrap createMikaClient(), so they inherit the same boundary: public catalog and stock reads only. They are not cart, checkout, account, webhook, admin, or protected agent-tool mutation APIs.

Provider

MikaProvider stores a MikaClient in React context. Pass either a ready-made client or MikaClientOptions:

import { MikaProvider } from "@bnomei/emdash-mika/react";

export function ProductIsland({ children }: { children: React.ReactNode }) {
  return (
    <MikaProvider options={{ pluginId: "mika" }}>
      {children}
    </MikaProvider>
  );
}

If neither client nor options are provided, MikaProvider creates a default client with createMikaClient().

Hooks

Hook	Role
useMika()	Returns the nearest MikaClient. Throws if no MikaProvider exists above the component.
useMikaSellables()	Returns a function bound to client.catalog.sellables().
useMikaStock()	Returns a function bound to client.stock.availability().

The hooks return request functions; they do not manage loading state, caching, mutation retries, or UI. Host components can pair them with their preferred React state/query library.

Astro Fit

The copied storefront templates are Astro-first and use Astro Actions for cart, wishlist, checkout, account, and admin flows. Use this React subpath only when a host page deliberately adds a React island for public catalog/stock reads. For how React components are mounted in Astro, see the official Astro framework components guide.

Source Anchors

• ⓟ ../emdash-mika/package.json
• ⓟ ../emdash-mika/src/react.ts
• ⓟ ../emdash-mika/src/api/client.ts
• ⓐ ../emdash-mika/src/templates/astro/examples/astro-storefront.md