@duffcloudservices/cms-react

React hooks and Vite plugins for DCS CMS integration.

Installation

pnpm add @duffcloudservices/cms-react

Usage

Vite Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { dcsContentPlugin, dcsSeoPlugin } from '@duffcloudservices/cms-react/plugins'

export default defineConfig({
  plugins: [
    react(),
    dcsContentPlugin(),
    dcsSeoPlugin(),
  ],
})

Using Hooks in Components

// src/pages/Home.tsx
import { useTextContent, useSEO } from '@duffcloudservices/cms-react'

export function Home() {
  const { t } = useTextContent({
    page: 'home',
    defaults: {
      'hero.title': 'Welcome',
      'hero.subtitle': 'Build amazing things',
    },
  })

  useSEO({ page: 'home' })

  return (
    <div>
      <h1>{t('hero.title')}</h1>
      <p>{t('hero.subtitle')}</p>
    </div>
  )
}

DCS Configuration Files

Create .dcs/content.yaml:

version: 1
global:
  nav.home: Home
  footer.copyright: © 2026 Company
pages:
  home:
    hero.title: Welcome to Our Site
    hero.subtitle: Build something amazing

Create .dcs/seo.yaml:

version: 1
global:
  siteName: My Site
  defaultTitle: My Site
  titleTemplate: "%s | My Site"
pages:
  home:
    title: Welcome
    description: The homepage of My Site

API

useTextContent(options)

Hook for text content with build-time and runtime support.

Options:

• page (string, required): Page slug matching entry in content.yaml
• defaults (Record<string, string>): Default text values
• runtime (boolean): Enable runtime fetching (premium tier)
• siteSlug (string): Site slug for runtime API
• apiBaseUrl (string): API base URL

Returns:

• t(key, fallback?): Get text by key
• content: All resolved content
• isLoading: Loading state
• error: Error message
• refresh(): Manually refresh content

useSEO(options)

Hook for SEO meta tags.

Options:

• page (string, required): Page slug
• overrides: Override title, description, or image

Returns:

• seo: Resolved SEO configuration

License

MIT