Programmatically mapping through Layouts components
Map through Layouts App components programmatically and always have the latest components loaded within Layouts
This guide is a continuation of Connecting Layouts App to React
⌛️ Estimated implementation time: 15 minutes
Programmatic component mapping allows developers to dynamically add components without the need to create a manual reference in their project after a new Layouts component is configured in Zesty.
In this doc, we will walk you through setting up a folder of components that dynamically map to the Zesty Layouts integration. Here is the example repo: Layouts Test Page
Lets get started! 🙌
Creating ComponentSelector Component
In your React/Next.js project create all your custom components in a components folder.
ComponentSelector.js component and include your custom components. The following snippet is an example of the
First, we import all components from index.js as zestyBlocks. The return value of zestyBlocks will be all of the modules we export from index.js as objects.
Next, we declared the ComponentSelector component which accepts props from the react-auto-layout package. Props will have all the data from Layouts that we will set up in the next section.
Initialize AutoLayout component
AutoLayout is expecting a
content object from the Zesty integration to be passed to the AutoLayout object. It is also expecting components to be passed as objects. In our example, we will be passing our ComponentSelector as a component.
If you are NOT using one of Zesty's Next.js starter templates, you will need to ensure that you have installed our webengine-json package in order to fetch the content object you are targeting. Here is an example snippet using Next.js
getServerSideProps. Be sure to replace
my-password with their corresponding values according to your content item's path and instance settings.
🎉 Congratulations! You are now iterating through your custom Layouts components without the need to manually reference these components after each new configuration. So long as your Zesty component name matches your applications component name, you are all set to go!
Connect with Content Experts
Book a free 15-minute consultation with a content expert. Discuss your application, pain points and requirements. Understand how Zesty's lower total cost of ownership, features, functionality can elevate your business by creating extraordinary digital experiences.
G2 MOMENTUM LEADER