Using Dynamic Properties with React Components in TeleportHQ

Here are some examples of using dynamic properties with React components in TeleportHQ:

Example 1: Basic Dynamic Property

Component Definition

You can define a component with dynamic properties in the UIDL format. For instance, a simple component that takes a dynamic title could be defined as follows:

json
{
  "name": "HelloWorldComponent",
  "propDefinitions": {
    "title": {
      "type": "string",
      "defaultValue": "Hello"
    }
  },
  "node": {
    "type": "element",
    "content": {
      "elementType": "container",
      "children": [
        {
          "type": "element",
          "content": {
            "elementType": "text",
            "children": [
              {
                "type": "dynamic",
                "content": {
                  "referenceType": "prop",
                  "id": "title"
                }
              }
            ]
          }
        }
      ]
    }
  }
}

Generated React Component

When this UIDL is processed by the React code generator, it produces the following React component:

javascript
import React from "react";

const HelloWorldComponent = (props) => {
  return <div>{props.title}</div>;
};

export default HelloWorldComponent;

Example 2: Passing Props from Parent to Child

Parent Component Definition

In the parent component, you can pass dynamic properties to the child component like this:

json
{
  "name": "ParentComponent",
  "node": {
    "type": "element",
    "content": {
      "elementType": "HelloWorldComponent",
      "attrs": {
        "title": {
          "type": "dynamic",
          "content": {
            "referenceType": "prop",
            "id": "dynamicTitle"
          }
        }
      }
    }
  }
}

Child Component Definition

The child component would be defined to accept the title prop:

json
{
  "name": "HelloWorldComponent",
  "propDefinitions": {
    "title": {
      "type": "string",
      "defaultValue": "Default Title"
    },
    "node": {
      "type": "element",
      "content": {
        "elementType": "text",
        "children": [
          {
            "type": "dynamic",
            "content": {
              "referenceType": "prop",
              "id": "title"
            }
          }
        ]
      }
    }
  }
}

Generated React Components

The parent component will pass the dynamic title to the child, and the generated code will reflect this relationship. The parent can define `dynamicTitle` in its state or props, and it will be passed down to the child component.

Conclusion

These examples illustrate how to define and use dynamic properties in React components within TeleportHQ. By utilizing the UIDL format, you can create flexible components that react to dynamic data, enhancing the interactivity of your applications[1][3].
Citations:
[1] https://docs.teleporthq.io/uidl/examples.html
[2] https://help.teleporthq.io/en/article/responsive-design-and-media-queries-7o4mb6/
[3] https://docs.teleporthq.io/uidl/structure.html
[4] https://github.com/teleporthq
[5] https://www.youtube.com/watch?v=bid2wxApGyQ

Are there any examples of using dynamic properties with React components in TeleportHQ