Connecting Layouts App to React

This guide is a continuation from "Manually integrating a Next.js project to Zesty content"

Install Autolayout package

Reference: https://github.com/zesty-io/react-autolayout

npm install @zesty-io/react-autolayout

Ensure Zesty is integrated to your React app

The AutoLayout package expects a content object from the Zesty toJSON API. If that is not configured, see these references for configuration:

Please review this doc to ensure your setup is integrated properly: https://zesty.org/tools/nextjs/manually-integrating-a-next.js-project-to-zesty-content

AutoLayout Component

Here is an example of an AutoLayout component which manually maps through the custom components in the React project to the components built in the Zesty Layouts App

QUICKSTART:

Add this to the top of your file
import { AutoLayout } from "@zesty-io/react-autolayout";
// Add this into your JSX body
<AutoLayout content={content} />s

Here is a full example snippet of running AutoLayout and mapping them to your own custom components.

See more custom component example here https://nextjs-marketing-nine.vercel.app/layouts/

import React from "react";
import { AutoLayout } from "@zesty-io/react-autolayout";
import { CustomTextarea } from "./CustomTextarea";
import { CustomColumn } from "./CustomColumn";
import { CustomRow } from "./CustomRow";
export default function Page({ content }) {
<AutoLayout content={content} components={{
"wysiwyg_basic": CustomTextarea,
"text": CustomText,
"column": CustomColumn,
"row": CustomRow,
"design": CustomDesign,
"link": CustomLink
}} />
}