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