@shophost/react

@shophost/react is the UI package for ShopHost. It provides:

• the admin app shell and route helpers
• Next.js App Router server entrypoints
• storefront providers, pages, and reusable components

Installation

pnpm add @shophost/react @shophost/rest-api @prisma/client @prisma/client-runtime-utils

Peer dependencies:

• next >= 14
• react >= 18
• react-dom >= 18

Entry Points

• @shophost/react Use for admin config, route helpers, and auth helpers.
• @shophost/react/next/server Use for App Router server-safe exports like RootPage.
• @shophost/react/storefront Use for storefront providers, checkout/account pages, cart UI, and hooks.

Admin Usage

Create an admin config:

import { defineConfig } from "@shophost/react";

export const adminConfig = defineConfig({
  apiBaseUrl: process.env.NEXT_PUBLIC_API_BASE_URL!,
  basePath: "/admin",
  branding: {
    name: "ShopHost",
  },
});

Mount the admin routes in Next.js App Router:

import { generatePageMetadata, RootPage } from "@shophost/react/next/server";
import type { Metadata } from "next";

import { adminConfig } from "../config";

export function generateMetadata(): Metadata {
  return generatePageMetadata(adminConfig);
}

export default function Page(props: { params: Promise<{ segments?: string[] }> }) {
  return <RootPage {...props} config={adminConfig} />;
}

Create the matching not-found page:

export { NotFoundPage as default } from "@shophost/react/next/server";

Useful root exports:

• defineConfig
• createRoutes
• createAdminAuthClient
• getAdminAuthClient

Storefront Usage

Wrap your storefront with ShophostProvider:

"use client";

import type { Locale } from "@shophost/client";
import { ModifiersDialog, ShophostProvider } from "@shophost/react/storefront";
import React from "react";

export function AppProvider({ children, locale }: { children: React.ReactNode; locale: Locale }) {
  return (
    <ShophostProvider baseUrl={process.env.NEXT_PUBLIC_APP_DOMAIN!} locale={locale} organizationId={process.env.NEXT_PUBLIC_ORGANIZATION_ID!} modifiersModal={<ModifiersDialog />}>
      {children}
    </ShophostProvider>
  );
}

Mount the built-in checkout and account flows:

"use client";

import { AccountPages, CheckoutPages } from "@shophost/react/storefront";

export function CheckoutRoute() {
  return <CheckoutPages />;
}

export function AccountRoute() {
  return <AccountPages />;
}

Useful storefront exports:

• ShophostProvider
• CheckoutPages
• AccountPages
• CartDrawer
• CartItems
• ModifiersDialog
• useCart
• useAPI
• useOrganization

Reference App

For a complete integration, see apps/example and the workspace README in the repository root.

License

MIT