Passing Dynamic Data to Builder.io Components in React

Technical Questions
1

Hi,
I’m new to Builder.io and planning to use it to display a few carousels on my website. I’ll be rendering the sections using the React <BuilderComponent> component.

I’d like to know if it’s possible to pass dynamic data, such as image URLs, CTA links, and text, directly from my React code to the Builder component for rendering. If so, could you guide me on how to achieve this?

Looking forward to any advice or examples. Thanks in advance!

2

Hello @nidhinradh,

Welcome to Builder.io forum!

Yes, you can pass dynamic data to the <BuilderComponent> in React. This allows you to have dynamic content such as image URLs, CTA links, and text that can be used within your Builder components.

To achieve this, you can use the data property available on the <BuilderComponent>. The data property allows you to pass any React state or props down into your Builder content, which can be bound to elements within Builder using state and actions.

Here is a basic way to pass dynamic data to the <BuilderComponent>:

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

function App() {
  const dynamicData = {
    imageUrl: 'https://example.com/image.jpg',
    ctaLink: 'https://example.com/cta',
    text: 'Welcome to My Carousel!'
  };

  return (
    <div className="App">
      <BuilderComponent
        model="your-section-model"
        data={dynamicData} // Pass your dynamic data here
      />
    </div>
  );
}

export default App;

In your Builder content, you can use the binding feature to use these data fields. For instance, if you have an image element, you can bind its src attribute to state.imageUrl, a link’s href to state.ctaLink, and text elements can be bound to state.text.

Here’s a quick overview on how to connect dynamic data in Builder:

  1. In the Builder Visual Editor, select the element you want to bind the data to.
  2. Go to the “Data” tab.
  3. Bind to the value you passed in, using state.yourValueName. For example, state.imageUrl.

This allows for seamless integration of dynamic content from your React application into your Builder.io components. If you have more questions or need further assistance, feel free to ask!

Thanks,

3

Thank you so much @manish-sharma for the quick response! It’s amazing to know that it’s so easy to implement this approach.
Now, my question is: does this approach also work with the Swift SDK on an iOS app(Headless CMS For Swift - Drag & Drop CMS - Builder.io)?

4

Hello @nidhinradh,

I haven’t tested it personally, but you can certainly give it a try by passing data props with the builder component. If that doesn’t work, please let us know. We may need to submit a feature request if it doesn’t operate as expected.

Example in react-native:

const products = [
  {
    id: 1,
    name: "Wireless Headphones",
    price: 99.99,
    description: "High-quality wireless headphones with noise cancellation.",
    category: "Electronics",
    inStock: true,
    imageUrl: "https://example.com/images/wireless-headphones.jpg"
  },
  {
    id: 2,
    name: "Smartphone 12 Pro",
    price: 1099.99,
    description: "Latest model of the Smartphone with cutting-edge features.",
    category: "Electronics",
    inStock: false,
    imageUrl: "https://example.com/images/smartphone-12-pro.jpg"
  },
  {
    id: 3,
    name: "Leather Wallet",
    price: 49.99,
    description: "Stylish leather wallet with multiple compartments for cards and cash.",
    category: "Accessories",
    inStock: true,
    imageUrl: "https://example.com/images/leather-wallet.jpg"
  }
];


          <Content
            apiKey={BUILDER_API_KEY}
            model="page"
            content={content}
            customComponents={CUSTOM_COMPONENTS}
            data={{ products }}
          />