By marking an element as a placeholder, you will be able to specify the actual content of that placeholder in the codebase. The content to specify can be anything — text, images, React components, etc.  A placeholder can be created out of any element on the stage, including a text box or a rectangle.

You can turn any element on stage into a placeholder by selecting it, choosing the [+ Add] button in the Properties Panel, and selecting Control Flow > Placeholder.

Then set a value for the placeholder: either a numeric index or a selector. For example, enter 0 as the value.  This means that the zero-th index child element passed into your Haiku component will be rendered in the place of your placeholder 0.  

For example:

<MyHaikuComponent><div>Some content</div></MyHaikuComponent>

Just count up from 0 for the next placeholder if you want more than one.

Tip: You can add a React or Angular child to your Haiku component.  If that child matches the selector, it will be swapped in at runtime.  If you chose a numeric index instead of a selector, the nth child of that component will match the index n

This would allow you to do something like:

<div>
  <YourHaikuComponent>
    <div id="my-id">Any React content here {this.someData}</div>
  </YourHaikuComponent>
</div>


Where that div with "Any React content here" would be subbed into a controlFlow.placeholder="#my-id" OR a controlFlow.placeholder=0 


Note: Currently we support placeholders for React & Angular, but not yet Vue or Vanilla JS.

 

Did this answer your question?