Visual data previews with React

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

React is a great at receiving new data and rerendering components. To make this integration easier CloudCannon has developed an open source library for easy installation. @cloudcannon/react-connector is a higher order component that listens to live editing events and passes the new props to your component.

Installation#

Cloudcannon React Connector is available on npm. To install run:

npm i @cloudcannon/react-connector

Next.js Integration#

Update the code in pages/_app.jsx from:

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

to:

import { CloudCannonConnect } from '@cloudcannon/react-connector'
export default function App({ Component, pageProps }) {
  const AppComponent = CloudCannonConnect(Component);
  return <AppComponent {...pageProps}/>
}

This should make no difference to your development or production environment. Loading the site in CloudCannon's Visual Editor and changing front matter will push new changes directly into the page props.

Any issues, please contact support or raise an issue on the GitHub repository.