@stormycms/react

React rendering, CMS registration, editor state, and session context.

pnpm add @stormycms/react

withCMS

withCMS(cmsProps, Component) attaches CMS metadata to a React component.

See Components and schema for registration and Fields for controls.

Rendering

ComponentTree takes components: CMSComponentData[], cmsExports: CMSExportsMap, and optional slotContent: ReactNode. It skips names absent from the map. slotContent renders at each Outlet.

buildLayoutTree(layouts, parentLayoutId) builds a layout chain from a flat list. Pass the page's layoutId as the second argument. It returns null if it cannot find a root layout.

LayoutTree takes layout: CMSLayoutData | null, cmsExports, and children. A null layout renders children directly. Each layout's Outlet renders the next layout or the page content.

Layout renders layout components and passes children through their outlets. Outlet is a non-editable, layout-only CMS component.

findComponent(components, id) searches descendants and returns a component or null.

Editor state

CMSPageProvider takes page: { id, components, initialData: { name, slug, layoutId? } }.

CMSLayoutProvider takes layout: { id, components, initialData: { name, parentLayoutId? } }.

The corresponding hooks expose component state and helpers to add, update, and remove components. They do not save to the API.

Session context

StormyProvider supplies session and site state. In Next.js, StormyServerProvider loads initial data on the server.

The guard checks sessions on activity and tab focus. onSessionExpired replaces its expiry redirect.

useStormy() returns { user, site, sites, isLoading, isAuthenticated, refresh } and throws outside the provider. refresh() reloads site data.