zesty.io

Product

Use Cases

Integrations

Learn

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.

Create a ComponentSelector.js component and include your custom components. The following snippet is an example of the ComponentSelector.js

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 using one of Zesty's Next.js starter templates (nextjs-starter ornextjs-v13-starter) here is an example snippet:

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-item-path and 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!

Start Here

We will listen to your needs and walk you through how Zesty can help your team.

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.

Trusted By

zesty customer logo Sonyzesty customer logo Rocket Leaguezesty customer logo Singlifezesty customer logo Acornszesty customer logo Phoenix Sunszesty customer logo Wattpadzesty customer logo Corner Shopzesty customer logo Bjs

G2 MOMENTUM LEADER

zesty customer logo zesty customer logo zesty customer logo zesty customer logo

Enter your details to connect with a Content Expert

First Name

Last Name

Email

Phone (optional)

Company

Please tell us about your project (optional)