React

import { ShopkitProvider, useCart, ProductProvider } from "@quickbutik/kit/react"

<ShopkitProvider config={{ publishableKey }} initialCart={cart}>{children}</ShopkitProvider>
<ShopkitProvider client={shopkit}>{children}</ShopkitProvider>

useShopkit(): ShopkitClient
useShopkitContext(): { client: ShopkitClient; cartStore: CartStore }

const { cart, itemCount, status, pending, error, revision, add, updateItem, removeItem, clear, clearCart, refresh } = useCart()

useProducts(params?: { limit?; cursor?; storefrontId?; currency? }, options?: { enabled?: boolean; initialData?: Page<Product> | null }): AsyncState<Page<Product>>

useProductSearch(params?: ProductSearchParams, options?: { enabled?; initialData? }): AsyncState<Page<Product>>

useProduct(productId: string | number | null | undefined, options?: { initialData?: Product | null; storefrontId?: string | null; currency?: string | null }): AsyncState<Product | null>

useCategories(params?: CategoryListParams, options?: { enabled?; initialData? }): AsyncState<Page<Category>>

useShop(options?: { initialData?: Shop | null }): AsyncState<Shop>

const { currency, selected, baseCurrency, currencies, mode, rate, chargeCurrency, setCurrency, isLoading, error } = useCurrency()

function CurrencySwitcher() {
  const { currency, currencies, setCurrency } = useCurrency()
  if (currencies.length < 2) return null
  return (
    <select value={currency ?? ""} onChange={(e) => setCurrency(e.target.value)}>
      {currencies.map((c) => <option key={c.code} value={c.code}>{c.code}</option>)}
    </select>
  )
}

useClientCurrency(client: ShopkitClient): string | null

useAsync<T>(operation: (signal: AbortSignal) => Promise<T>, deps: readonly unknown[], options?: { enabled?; initialData? }): AsyncState<T>

<ProductProvider product={product}>…</ProductProvider>          // resolved
<ProductProvider product={promiseForProduct}>…</ProductProvider> // React 19 use()
<ProductProvider slug="cotton-tee">…</ProductProvider>           // looks it up
<ProductProvider id="prod_27">…</ProductProvider>                // one request

useProductState(): ProductState
useOptionalProductState(): ProductState | null // outside a provider

const { addToCart, canAddToCart, pending, error, missingOptions, buyNow, buying, buyNowError } = useProductAddToCart()

<ProductOptionValues option={group.id}>
  {(value) => (
    <button key={value.id} aria-pressed={value.selected} aria-disabled={!value.available} onClick={() => select(group.id, value.id)}>
      {value.name}
    </button>
  )}
</ProductOptionValues>

<ProductImage width={800} height={800} priority />          // inside <ProductProvider>
<ProductImage product={product} width={400} height={400} /> // a card
<ProductImage image={image} product={product} width={120} /> // a gallery
<ProductImage productId="prod_27" width={64} />              // fetches; needs <Suspense>

const { src, srcSet, alt, image, product, width, height } = useProductImage({ width: 800 })

const { start, redirectToCheckout, buyNow, starting, error, url } = useCheckout()

const { status, orderNumber, outcome, confirmation, loading, error } = useOrderConfirmation(sessionId?, options?)

// The server read a snapshot; a settled one renders final on the first paint.
const { status, orderNumber } = useOrderConfirmation(sessionId, { initialConfirmation })

<Checkout successUrl="/success" backUrl="/cart" lang="sv" onComplete={({ orderNumber }) => track(orderNumber)} />

<ConsentProvider revision={2} lang="sv">{children}</ConsentProvider>

const { status, analytics, marketing, open, allows, acceptAll, rejectAll, save, reset, openSettings, closeSettings, store } = useConsent()
useOptionalConsent() // the same, or null without a consent provider

<ConsentBanner lang="sv" privacyPolicyUrl="/integritetspolicy" />   // the default accessible dialog
<ConsentBanner>{(state) => state.visible && <aside>…</aside>}</ConsentBanner>   // headless

<ConsentSettingsButton className="link" />
<ConsentSettingsButton>Ändra cookieval</ConsentSettingsButton>

<ConsentGate category="marketing" fallback={<p>Allow marketing cookies to see the video.</p>}>
  <iframe src="https://www.youtube.com/embed/…" />
</ConsentGate>

<AnalyticsProvider destinations={[tiktok]}>{children}</AnalyticsProvider>

const analytics = useAnalytics()           // throws without a hub
const maybe = useOptionalAnalytics()       // or null
analytics.track(viewItemListEvent(items, "New in"))

const { tracked, error } = useTrackPurchase({ orderNumber, sessionId?, enabled?, affiliation? })

<SeoProvider baseUrl="https://myshop.com" shop={shop} currency="SEK" productPath="/products/{slug}" organization>
  {children}
</SeoProvider>

<SEO />                                         // inside <ProductProvider>
<SEO product={product} url={`/products/${product.slug}`} />
<SEO category={category} url="/categories/shirts" />
<SEO title="Tack för din order" noIndex noFollow />

useSeo(input?: SeoInput & SeoDefaults): SeoTags

<JsonLd data={tags.jsonLd} />