The renderer API shipped since Foundry (v6) is at the same time more strict and more flexible. To get ready for this new API, you must understand some basics of the transient render tree produced by the TRE:
During the transient render tree generation, every DOM node is translated to a
TTextnodes correspond to DOM
TTextnodes) or DOM elements which children are DOM
TTextnodes). So a
TTextnode cannot have children, and its content is a string accessible with the
TBlocknodes can have any children.
You are kindly advised to read Transient Render Engine page before continuing!
You can customize rendering at two steps of the flow:
During TRT generation. via HTML model definition.
At (React) render time via custom renderers.
These customizations are not exclusive, so you can use both approaches at the same time.
Let's say we have defined an advanced, powerful
<blue-circle> Web Component for our website and we need to register a custom renderer for this tag. If we don't, the
<blue-circle> elements will be translated to
TEmpty and won't be rendered.
We must register an element model for this tag because it is non-standard.
Custom tags in HTML markup must never be self-closing. The HTML parser will not recognize non-void self-closing tags by default which will lead to unexpected outcomes.
We may register a custom component renderer, but this is not mandatory (see next chapter).
You cannot set the
contentModel dynamically. This is currently a limitation of the TRE.
You can register custom renderers components with the
Stop talking, let's try it out. We're going to define a renderer for the
<h1> element which supports press interactions:
The wrapper component injected when handling
TBlock nodes is defined by the
GenericPressable prop. You can also customize the highlight color with
pressableHightlightColor. Also note that
onPress works with textual nodes, in which case the eponym prop of React Native
Text element will be used instead.
Let's continue with a common requirement: injecting ads in the body of an article. More precisely, after the 2d and 4th children. To achieve our goal, we are going to use the
The foundry API is powerful in terms of rendering customization. It is very easy to insert child elements, while preserving the internal rendering logic.
A custom renderer will receive the below props:
The default fallback renderer for this
The internal renderer for this
tagName. An internal renderer is like a custom renderer, but registered internally. If there is no internal renderer registered for this tag,
InternalRendererwill be equal to
The flatten style object which should be passed to the root element returned by this component.
The position relative to the parent React element, starting at 0. Not to be confused with
TNodeShape.indexthe position of the
TNodebefore hoisting, which is much closer to the position in the DOM.
The total number of children of this React element parent. e.g. number of React element siblings + 1.
CustomRendererProps for a complete reference.