Connecting Layouts App to React
This guide is a continuation from "Manually integrating a Next.js project to Zesty content"
npm install @zesty-io/react-autolayout
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
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
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.
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
}} />
}