Skip to main content

propeller-v2-cms-react

CMS page renderer + block dispatcher + adapter provider for Propeller Commerce React shops.

This package is the rendering + provider layer. There is no CMS adapter to install from npm: write one for your CMS, or start from the Strapi and Prepr providers in the Propeller Next boilerplate's lib/cms/providers. The framework-agnostic CmsAdapter contract lives in propeller-v2-core-ui.

What's here​

  • <CmsAdapterProvider> — wires a CmsAdapter instance into the React tree.
  • useCms() — reads the adapter from context, for client components that need optional CMS access.
  • <CmsPageRenderer> — renders a CmsPage's block list with a per-block renderer map.
  • <CmsBlock> — single-block dispatcher; the building block the page renderer calls per item.

Mode-of-operation​

import { CmsAdapterProvider, CmsPageRenderer } from '@propeller-commerce/propeller-v2-cms-react';
import { adapter } from '@/lib/cms'; // your CmsAdapter implementation

function App({ children }) {
  return (
    <CmsAdapterProvider adapter={adapter}>
      {children}
    </CmsAdapterProvider>
  );
}

// In a page:
function CmsPage({ page }) {
  return (
    <CmsPageRenderer
      page={page}
      renderers={{
        hero: (block) => <HeroBlock data={block.data} />,
        text: (block) => <TextBlock data={block.data} />,
      }}
    />
  );
}

Why no built-in blocks?​

Block component styling, layout, and content shape vary too much between shops to share. This package ships the dispatcher, the renderer, and the provider — not the blocks themselves. Register whatever your CMS emits via the renderers map.

The accelerator shop templates ship a small default block set (<HeroBlock>, <TextBlock>, <ImageBlock>, <ProductCarouselBlock>) as a starting point shops can edit or replace freely.

Pair with​

Status​

The package is pre-1.0 (0.x). Public API may change between minor versions until it stabilises; breaking changes are called out in the changelog.