Dynamic Component

[tawfek]

First of all This tool is amazing!
I'm just wondering if this scenario works.
1- create a custom component to list items
2- when the component is placed on the page, it will send an API request to fetch items.
3- the component renders the fetched items on the page.
4- Export the file to HTML, while keeping the created component fetches the items from the API.

is this possible using this SDK? I appreciate any help you can give me.

[surajair]

@tawfek
Yes. technically it should be possbile as the registered components are plain React components. I'll try to cookup a quick demo of this.

[surajair]

Here is a simple block which fetches data from server and renders in builder. This will work in builder and rendering ChaiBlocks as react components.
However, if you wish to export it as HTML, it is not supported as the export html part is synchronus.
Can you elaborate little more about your use case?
Builder has support for data binding as well, so , may be that might work for you.

import { registerChaiBlock } from "@chaibuilder/runtime";
import React, { useEffect, useState } from "react";

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const DynamicComponent = () => {
  const [post, setPost] = useState<Post | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchRandomPost = async (): Promise<void> => {
      setIsLoading(true);
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/posts",
        );
        if (!response.ok) {
          throw new Error("Failed to fetch posts");
        }
        const posts: Post[] = await response.json();
        const randomIndex = Math.floor(Math.random() * posts.length);
        setPost(posts[randomIndex]);
        setError(null);
      } catch (error) {
        console.error("Error fetching post:", error);
        setError("Failed to fetch post. Please try again later.");
      } finally {
        setIsLoading(false);
      }
    };

    fetchRandomPost();
  }, []);

  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  if (!post) {
    return <p>No post available</p>;
  }

  return (
    <div
      style={{
        maxWidth: "600px",
        margin: "0 auto",
        padding: "20px",
        border: "1px solid #ccc",
        borderRadius: "5px",
      }}>
      <h2 style={{ fontSize: "20px", marginBottom: "10px" }}>{post.title}</h2>
      <p style={{ fontSize: "16px" }}>{post.body}</p>
      <p style={{ marginTop: "10px", fontStyle: "italic" }}>
        Post ID: {post.id}
      </p>
    </div>
  );
};

registerChaiBlock(DynamicComponent, {
  type: "Dynamic",
  label: "Dynamic",
  group: "Dynamic",
});