How to control my page layout by adding custom Element?

Technical Questions
1

Builder content link
e.g. Builder.io: Drag and drop page builder and CMS

Builder public api key
fe16958c8a554c0cbdd68cf4ba028616

What are you trying to accomplish

I wanna add a custom WrapperComponent which should be able to control the (parent) layout (eg: hide Navigation, layout width/boxed, ON/OFF sidebars…etc. ). The component itself sits within this stack.

  • Layout
    • Header
    • Navigation
    • Content
      • SomeSidebar
      • MainContent
        • CUSTOM_COMPONENT
    • Footer

That component then also could take child elements. (Using Your React Components in Builder.io - Builder.io)

Code stack you are integrating Builder with
NETXJS 10.x

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

How to accomplish that? Are there examples for such cases?

Thank you

2

Hey @jezekjancom - one common way to accomplish this is with custom fields

E.g. add fields to your page like showNavigation that is a boolean, layoutWidth that is a number etc

then you can do like

import { BuilderComponent, BuilderContent, builder } from '@builder.io/react'

export const getStaticProps = async () => {
  const page = await builder.get('page', ...);
  return { props: { page } }
}

export default ({ page }) => {
  return ( 
    // This wrapper allows real time previewing of changing the custom field values like show/hide nav
    <BuilderContent model="page" content={page}>{page => 
      // Your layout component that you pass in the custom fields
     <MyLayoutComponent showNavigation={page.data.showNavigation} layoutWidth={page.data.layoutWidth}>
       // Render the rest of the Builder page content
       <BuilderComponent model="page" content={page} />
     </MyLayoutComponent>}
    </BuilderContent>
  )
}