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:

• <Image /> component 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.com/

Development

This repository contains a number of demos/examples. You can use them to locally test your changes to the package with npm link:

npm link
cd examples/images-and-seo/vanilla-react
npm link react-datocms
npm run start

Now on another terminal you can run:

npm run watch

This will re-compile the package everytime you make a change, and the example project will pick those changes instantly.

---

What is DatoCMS?

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

Trusted by over 25,000 enterprise businesses, agency partners, 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!

Quick links:

• ⚡️ Get started with a free DatoCMS account
• 🔖 Go through the docs
• ⚙️ Get support from us and the community
• 🆕 Stay up to date on new features and fixes on the changelog

Our featured repos:

• datocms/react-datocms: React helper components for images, Structured Text rendering, and more
• datocms/js-rest-api-clients: Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our GraphQL Content Delivery API instead.
• datocms/cli: Command-line interface that includes our Contentful importer and Wordpress importer
• datocms/plugins: Example plugins we've made that extend the editor/admin dashboard
• datocms/gatsby-source-datocms: Our Gatsby source plugin to pull data from DatoCMS
• Frontend examples in different frameworks: Next.js, Vue and Nuxt, Svelte and SvelteKit, Astro, Remix. See all our starter templates.

Or see all our public repos