Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon What are some common use cases for dynamic properties in TeleportHQ


What are some common use cases for dynamic properties in TeleportHQ


Here are some common use cases for dynamic properties in TeleportHQ:

Displaying Content from a Headless CMS

- Connect your TeleportHQ project to a headless CMS like Contentful, Strapi, or Wordpress
- Import content types and map the fields to dynamic properties in your components
- Whenever the CMS content is updated, it will automatically update the website

Passing Data Between Parent and Child Components

- Define dynamic properties in child components using `propDefinitions`
- In the parent component, pass the dynamic data to the child via `attrs`
- The child can then reference the passed properties using dynamic nodes

Handling User Interactions

- Use dynamic properties to update the state of components based on user actions
- For example, a button's color could change on hover by defining a hover state
- Dynamic properties allow you to create interactive and responsive user experiences

Generating Unique Content

- Dynamic properties can be used to generate unique content for each instance of a component
- For example, a testimonial component could have dynamic properties for the name, image, and quote
- This allows you to reuse the component structure while populating it with unique data

Responsive Design

- Use dynamic properties to adjust the layout and styling of components based on screen size
- Define media queries and bind properties like width, height, padding, etc. to the screen size
- This ensures your website looks great on any device

By leveraging dynamic properties, you can create flexible, interactive, and data-driven websites in TeleportHQ without writing extensive code. The ability to connect to headless CMSes, pass data between components, handle interactivity, and adapt to different screen sizes makes dynamic properties a powerful feature for building modern web applications.

Citations:
[1] https://teleporthq.io/responsive-web-design
[2] https://www.commoninja.com/platforms/teleporthq-
[3] https://www.youtube.com/watch?v=bid2wxApGyQ
[4] https://docs.teleporthq.io/uidl/examples.html
[5] https://github.com/teleporthq/teleport-code-generators
[6] https://www.youtube.com/watch?v=ypPIZDy5j4E