React

npm install @multitenant/react react

'use client';

import type { ResolvedTenant, TenantsConfig } from '@multitenant/core';
import { createTenantRegistry } from '@multitenant/core';
import { TenantProvider } from '@multitenant/react';
import tenantsConfig from '../tenants.config.json';

const registry = createTenantRegistry(tenantsConfig as TenantsConfig);

export function AppShell({
  tenant,
  children,
}: {
  tenant: ResolvedTenant;
  children: React.ReactNode;
}) {
  return (
    <TenantProvider registry={registry} tenant={tenant} environment={tenant.environment}>
      {children}
    </TenantProvider>
  );
}

'use client';

import {
  useTenant,
  useMarket,
  useTenantFlag,
  useTenantTheme,
  useExperiment,
  useTenantConfig,
  useTenantContext,
} from '@multitenant/react';

export function TenantBanner() {
  const { tenantKey, marketKey, flags } = useTenant();
  const market = useMarket();
  const beta = useTenantFlag('beta');
  const theme = useTenantTheme();

  return (
    <div>
      {tenantKey} · {marketKey} · {market.locale} · {market.currency}
      {beta ? ' · beta' : ''}
      {theme?.preset ? ` · theme ${theme.preset}` : ''}
    </div>
  );
}

export function ExperimentSlot() {
  const variant = useExperiment('hero_copy');
  return <section data-variant={variant}>…</section>;
}

export function TenantSettingsPanel() {
  const settings = useTenantConfig<{ supportEmail?: string }>();
  return <a href={`mailto:${settings.supportEmail}`}>Support</a>;
}

/** Escape hatch: registry + tenant + environment in one object */
export function DebugTenant() {
  const { registry, tenant, environment } = useTenantContext();
  return <pre>{JSON.stringify({ environment, tenantKey: tenant.tenantKey }, null, 2)}</pre>;
}