Visual data previews with React

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.