react-datocms

👉 Visit the DatoCMS homepage or see What is DatoCMS?

react-datocms

A set of components and utilities to work faster with DatoCMS in React environments. Integrates seamlessy with DatoCMS's GraphQL Content Delivery API and Real-time Updates API.

Installation

npm install react-datocms

Documentation

This package offers different components and hooks. Please refer to one of the following pages to learn more about a specific area of interest:

• <SRCImage /> and <Image /> components for responsive/progressive images
• <StructuredText /> component
• <VideoPlayer /> component
• useQuerySubscription() hook for live, real-time updates of content
• useSiteSearch() hook to render a DatoCMS Site Search form widget
• renderMetaTags() and other helpers to render social share, SEO and Favicon meta tags

Demos

For fully working examples take a look at our examples directory.

Live demo: https://react-datocms-example.netlify.app/

Development

This repository contains a number of demos/examples. You can use them to locally test your changes.

cd examples
npm setup
npm run start

What is DatoCMS?

DatoCMS is the REST & GraphQL Headless CMS for the modern web.

Trusted by over 25,000 enterprise businesses, agencies, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our developers, content editors and marketers!

Why DatoCMS?

• API-First Architecture: Built for both REST and GraphQL, enabling flexible content delivery
• Just Enough Features: We believe in keeping things simple, and giving you the right feature-set tools to get the job done
• Developer Experience: First-class TypeScript support with powerful developer tools

Getting Started:

• ⚡️ Create Free Account - Get started with DatoCMS in minutes
• 🔖 Documentation - Comprehensive guides and API references
• ⚙️ Community Support - Get help from our team and community
• 🆕 Changelog - Latest features and improvements

Official Libraries:

• Content Delivery Client - TypeScript GraphQL client for content fetching
• REST API Clients - Node.js/Browser clients for content management
• CLI Tools - Command-line utilities for schema migrations (includes Contentful and WordPress importers)

Official Framework Integrations

Helpers to manage SEO, images, video and Structured Text coming from your DatoCMS projects:

• React Components
• Vue Components
• Svelte Components
• Astro Components

Additional Resources:

• Plugin Examples - Example plugins we've made that extend the editor/admin dashboard
• Starter Projects - Example website implementations for popular frameworks
• All Public Repositories