@duffcloudservices/cms-react

React hooks and Vite plugins for DCS CMS integration.

Installation

``bash
pnpm add @duffcloudservices/cms-react
`

Usage

$3

`typescript
// 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(),
],
})
`

$3

`tsx
// 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 (

{t('hero.title')}

{t('hero.subtitle')}

)
}
`

$3

Create .dcs/content.yaml:

`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:

`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

$3

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

Options:
- page (string, required): Page slug matching entry in content.yaml
- defaults (Record): 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

$3

Hook for SEO meta tags.

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

Returns:
- seo`: Resolved SEO configuration

License

MIT