Skip to main content

Getting started

Install​

npm install \
  @propeller-commerce/propeller-v2-cms-react \
  @propeller-commerce/propeller-v2-core-ui \
  @propeller-commerce/propeller-sdk-v2

There is no CMS adapter to install from npm. Write one against the CmsAdapter contract for your CMS, or start from the Strapi and Prepr providers in the Propeller Next boilerplate's lib/cms/providers.

Wire the provider​

At the React root, alongside whatever Propeller-UI provider you already have:

// app/providers.tsx (Next.js) or src/main.tsx (Vite/CRA)
'use client';
import { CmsAdapterProvider } from '@propeller-commerce/propeller-v2-cms-react';
import { adapter } from '@/lib/cms';            // your CmsAdapter implementation

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CmsAdapterProvider adapter={adapter}>
      {/* …other providers… */}
      {children}
    </CmsAdapterProvider>
  );
}

If the shop has no CMS configured, pass adapter={null} — see Patterns.

Fetch and render a page​

Server-side (recommended — keeps content cacheable):

// app/(cms)/[...slug]/page.tsx — Next.js App Router
import { CmsPageRenderer } from '@propeller-commerce/propeller-v2-cms-react';
import { adapter } from '@/lib/cms';            // server-only instance
import { notFound } from 'next/navigation';
import { HeroBlock, TextBlock } from '@/components/cms';

export default async function Page({ params }: { params: { slug: string[] } }) {
  const slug = params.slug.join('/');
  const page = await adapter.getPage(slug);
  if (!page) notFound();

  return (
    <CmsPageRenderer
      page={page}
      renderers={{
        hero: (b) => <HeroBlock data={b.data} />,
        text: (b) => <TextBlock data={b.data} />,
      }}
    />
  );
}

Client-side via useCms():

'use client';
import { useCms } from '@propeller-commerce/propeller-v2-cms-react';

export function PreviewBanner() {
  const cms = useCms();
  if (!cms) return null;        // no adapter wired
  // optionally call cms.getGlobals() etc.
}