Registering a component with a dynamic data or by passing a variable

Hello,
how could I add to an inputs or to the inputs array a data coming from an api? Something similar to this:


I have done a lot of tests and probably the code is wrong.
Best regards and thank you very much.

Hi @idy, Welcome to the Builder.io Forum!

To add data fetched from an API to the inputs array of a Builder.io custom component, you can use the getAsyncProps feature in combination with the Builder.registerComponent function. This approach allows you to dynamically fetch data and pass it as inputs to your component.

Here is a step-by-step example using the Next.js framework:

  1. Create your API call function:
    Define a function that fetches data from your API. This function should return data in the format you need for your component inputs.

    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      return data;
    }
    
  2. Register your custom component with async data fetching:
    Use the getAsyncProps helper to fetch data asynchronously when your custom component is rendered in the Builder Visual Editor.

    import { builder, BuilderComponent } from '@builder.io/react';
    import { useEffect, useState } from 'react';
    
    builder.init('YOUR_API_KEY');
    
    const MyAsyncComponent = ({ items }) => {
      return (
        <div>
          {items?.map((item) => (
            <div key={item.id}>{item.name}</div>
          ))}
        </div>
      );
    };
    
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      return data;
    };
    
    Builder.registerComponent(MyAsyncComponent, {
      name: 'MyAsyncComponent',
      inputs: [
        {
          name: 'items',
          type: 'list',
          defaultValue: [],
          // Provide a function to fetch async props
          async getAsyncProps() {
            const data = await fetchData();
            return {
              items: data.items,
            };
          },
        },
      ],
    });
    
    export default MyAsyncComponent;
    
  3. Use your component in the Visual Editor:
    When you add MyAsyncComponent in the Builder Visual Editor, it will fetch data from the API and pass it to the inputs array as defined in the component’s registration.

Custom Fetching Example Using getAsyncProps

Instead of a static data-fetching function, getAsyncProps can be customized further to handle complex fetching logic, conditional data loads, or context-based queries.

import { BuilderComponent, builder } from '@builder.io/react';
import { GetStaticProps } from 'next';
import fetch from 'node-fetch'; // Make sure you have 'isomorphic-fetch' or 'node-fetch' installed

builder.init('YOUR_API_KEY');

const MyComponent = ({ items }) => {
  return (
    <div>
      {items?.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

// Replace with your API endpoint
async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Builder.registerComponent(MyComponent, {
  name: 'MyComponent',
  inputs: [
    {
      name: 'items',
      type: 'list',
      defaultValue: [],
      async getAsyncProps() {
        const data = await fetchData();
        return {
          items: data.items,
        };
      },
    },
  ],
});

export default MyComponent;

By following this example, you can extend the functionality of components in Builder.io to load dynamic data from any API, enriching your visual content management.

For more details on registering custom components and getAsyncProps, check out the Registering Custom Components and Content API documentation.