@kitenzo/react

v0.4.0 · published

React bindings. Re-exports everything in @kitenzo/core and adds a provider, hooks and the BundleEmbed component.

npm install @kitenzo/react

• Depends on: @kitenzo/core.
• Peer deps: react >= 18, react-dom >= 18. Optional @shopify/hydrogen-react >= 2024.0.0 (only needed for the /hydrogen subpath).

Public exports

Provider

Export	Kind	Doc
KitenzoProvider	component	Provider & client. Accepts apiKey, baseUrl, apiVersion, countryCode.
useKitenzo	hook	Returns the KitenzoClient.
useSettings	hook	Returns ShopSettings | null.

Hooks

Export	Returns	Doc
useBundles	{ bundles, isLoading, error, refetch }	Hooks
useBundle	{ bundle, isLoading, error, refetch }	Hooks
useBundleBuilder	builder state + methods (incl. isSatisfied, conditions)	Hooks
useBundlePrice	price fields (raw + formatted; market-aware)	Hooks
useBundleCart	{ addBundleToCart, isLoading, error, lastResult } — submit only	Hooks
useBundleAjaxCart	full add-to-cart flow over the theme’s AJAX cart	Hooks
useSellingPlan	subscription purchase-option state (plans, selectPlan, cartLineOptions)	Hooks

Components

Export	Kind	Doc
BundleEmbed	component	React — BundleEmbed

BundleEmbed is the only component

@kitenzo/react exports exactly one component — BundleEmbed (for Mode 1). There is no <BundleBuilder>, <BundleCard>, <BundlePrice> or similar — UI for custom builds (Mode 2) is intentionally left to you. Compose it from the hooks above.

@kitenzo/react/hydrogen subpath

Bindings for carts driven by @shopify/hydrogen-react live behind a subpath, so importing @kitenzo/react pulls in none of that optional peer dependency:

import { KitenzoShopifyProvider, useStorefrontBundleCart } from '@kitenzo/react/hydrogen';

Export	Kind	Purpose
useStorefrontBundleCart	hook	The same add-to-cart flow contract as useBundleAjaxCart, for a Storefront-API cart. Needs a <CartProvider> ancestor. Handles hydrogen-react’s silent mutation drops, orders the _bundles write after the lines land, and gates isAdded on it.
KitenzoShopifyProvider	component	A ShopifyProvider wrapper that degrades gracefully on blank storeDomain / storefrontToken instead of white-screening.

Re-exports from core

All of @kitenzo/core is available from @kitenzo/react, so a React app installs one package:

import {
  KitenzoProvider, useBundle, useBundleBuilder, useBundlePrice, useBundleCart, BundleEmbed,
  KitenzoClient, createBundleBuilder, addBundleToCart, buildCartPayload,
  calculatePrice, formatMoney, formatCurrency, getSectionLimits, getBundleLimits, UNBOUNDED,
} from '@kitenzo/react';

Plus every TypeScript type.