React SDK

InlineCMSProvider

Wraps your app and provides CMS context to all children. Automatically injects the floating toolbar.

import { InlineCMSProvider } from '@inlinecms/react'

<InlineCMSProvider config={{
  apiKey: 'your-key',
  apiUrl: 'https://cms.yourdomain.com',  // optional
  cdnUrl: 'https://cdn.yourdomain.com',  // optional
  pageId: '/about',                       // optional, auto-inferred from URL
  environment: 'production',              // optional, defaults to 'production'
}}>
  <App />
</InlineCMSProvider>

Config options

Property	Type	Required	Description
apiKey	string	Yes	Project API key
apiUrl	string	No	API base URL (for self-hosted)
cdnUrl	string	No	CDN base URL for published content
pageId	string	No	Override page ID (auto-inferred from window.location.pathname)
environment	'production' | 'development'	No	Disables CDN in development

Hooks

useCMS

Primary hook for component-level CMS integration.

import { useCMS } from '@inlinecms/react'

const { getField, setField, saveDraft, publish, canEdit, hasPendingChanges, instanceKey } = useCMS({
  componentId: 'hero-section',
  fields: [
    { key: 'title', type: 'text', label: 'Hero Title' },
    { key: 'subtitle', type: 'text' },
  ],
})

useAuth

Exposes authentication state and actions.

import { useAuth } from '@inlinecms/react'

const { isAuthenticated, canEdit, user, login, logout } = useAuth()

Inline elements

Drop-in CMS-aware replacements for HTML elements:

import {
  InlineH1, InlineH2, InlineH3, InlineH4, InlineH5, InlineH6,
  InlineP, InlineSpan, InlineDiv, InlineSection,
  InlineImg, InlineA, InlineBlockquote,
} from '@inlinecms/react'

Each accepts all standard HTML props plus inline-cms-key, inline-cms-label, inline-cms-type, and inline-cms-group.

withCMS

Higher-order component for wrapping existing components.

import { withCMS } from '@inlinecms/react'

// Selector mode
const CMSHero = withCMS(HeroSection, {
  componentId: 'hero',
  fields: [
    { key: 'title', selector: 'h1', type: 'text' },
  ],
})

// Annotation mode
const CMSHero = withCMS(HeroSection, { componentId: 'hero' })

sanitizeHTML

Exported utility for sanitizing user-edited HTML.

import { sanitizeHTML } from '@inlinecms/react'

const clean = sanitizeHTML('<p onclick="alert(1)">Safe <strong>text</strong></p>')
// Returns: '<p>Safe <strong>text</strong></p>'