Using live editing 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:

Shell
npm i @cloudcannon/react-connector

Next.js Integration

Update the code in pages/_app.jsx from:

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

to:

pages/_app.jsx
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.

Was this article helpful? or Suggest an improvement >

Related articles