A very well documented and often seen use case for Builder is to use the <BuilderComponent> component from our React SDK to create editable content based on Page or Section models from Builder that is passed down to your React application.
But did you know that you can pass data from Page, Section and Data models down to your React application for live editing, previewing and even A/B testing through the use of the <BuilderContent> component as well? Some great examples of this is to update your site’s CSS theme, set up a global navigation bar or even just to pass content from Builder Custom Fields to a non-Builder element…essentially any data that is authorable in Builder can be passed to your application’s codebase to use. In this example we will build a global navigation bar using a simple Data Model.
To set up a basic NextJS app, we are following the steps outlined in this tutorial: Setting up visual drag-and-drop page building with Next.js
Once you have an app set up that you want to add your Navigation Bar to, go to the models page within Builder and create a data model with a list for our navigationLinks, each containing some linkText and a linkUr. We will call this model “Site Settings”
Since this will live on all pages, we can set the editing URL to whatever you want, usually just the root url or http://localhost:3000
You will then create a Navigation.tsx file within your React/NextJS app, something like this:
import { BuilderContent } from "@builder.io/react"
export const Navigation = (props) => {
return <BuilderContent model="site-settings">{ (data) => {
return <>
<ul>
{data?.navigationLinks?.map(link => {
return <div key={link.linkUrl} >
{link.linkText}
</div>
})}
</ul>
{props.children}
</>
}}</BuilderContent>
}
Now within whatever file in your app that you want to use this Navigation element, just import your component and add it to the page. For example, you could include in _app.tsx at the top of your page, so this component will display on all pages
import { builder } from '@builder.io/react'
import { Navigation } from '@components/Navigation'
builder.init(YOUR_API_KEY)
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Navigation />
<Component {...pageProps} />
</>
)
}
Now to edit the navigation, go back to Builder.io: Drag and drop page builder and CMS, and create a new instance of our Site Settings data model. Name it whatever you want, and you will see the fields on your left nav to add the links. As you add links you will see them populate, and now any page of your app that includes the component will show your component based on the inputs here.
As you can see, the component is an extremely powerful tool to pass data from Builder down to your app in a way that allows live editing and previewing from Builder to be displayed and manipulated within your app however you need. You could have this data model map to a CSS theme, or pass other data down from Builder throughout the rest of your application. It is even possible to run A/B tests on data models to test content on your site.
Check it out and let us know if you have any questions!