@voyant-travel/cruises-react

The cruises client tier: headless data hooks/clients plus the styled UI components (formerly @voyant-travel/cruises-ui).

Headless consumers (storefronts, portals) import from the root, ./hooks, ./client, or ./query-keys — these pull no styling peers. Styled surfaces live under ./ui, ./components/*, ./i18n, and ./styles.css, whose heavier peers (@voyant-travel/ui, @voyant-travel/catalog-react) are optional and only needed when you import those subpaths.

React Query hooks + Zod-validated fetch client for the Voyant cruises module.

Mirrors the convention used by @voyant-travel/relationships-react and @voyant-travel/inventory-react.

Quickstart

import { VoyantCruisesProvider } from "@voyant-travel/cruises-react/provider"
import { useStorefrontCruises } from "@voyant-travel/cruises-react"

function App() {
  return (
    <VoyantCruisesProvider baseUrl="/api">
      <CruiseGrid />
    </VoyantCruisesProvider>
  )
}

function CruiseGrid() {
  const { data, isLoading } = useStorefrontCruises({ cruiseType: "expedition" })
  if (isLoading) return <p>Loading…</p>
  return (
    <ul>
      {data?.data.map((c) => <li key={c.id}>{c.name}</li>)}
    </ul>
  )
}

See docs/architecture/cruises-module.md in the monorepo root for the full module design.

UI components

Importable React UI components for Voyant cruises. Bundler-consumed (Vite, Next.js, webpack, etc.).

Install

pnpm add @voyant-travel/cruises-react @voyant-travel/ui @tanstack/react-query react react-dom

@voyant-travel/ui provides the design-system primitives and is required when you import the styled subpaths (./ui, ./components/*).

All components accept a className prop and merge it with cn(). Wrap or compose to extend; use the registry copy-paste path (npx shadcn add @voyant/...) for components you want to fork outright.

I18n

Components render English by default. To localize them, wrap your UI in CruisesUiMessagesProvider and import only the locales your app supports.

import { CruisesUiMessagesProvider } from "@voyant-travel/cruises-react/ui"
import { cruisesUiEn } from "@voyant-travel/cruises-react/i18n/en"
import { cruisesUiRo } from "@voyant-travel/cruises-react/i18n/ro"

English-only apps should import only ./i18n/en. Bilingual apps can import ./i18n/en and ./i18n/ro.