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 : During the transient render tree generation, every DOM node is translated to a . nodes correspond to DOM{' '} nodes (anonymous{' '} nodes) or DOM elements which children are DOM nodes (named{' '} nodes). So a node cannot have children, and its content is a string accessible with the field. Thanks to hoisting, nodes can only have and{' '} nodes as children. nodes can have any children. You are kindly advised to read{' '} page before continuing!

You can customize rendering at two steps of the flow: During 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 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). For a more detailed explanation of the allowed parameters for the static method, see{' '} .

In the below example, we are changing the element model of the tag to support inline rendering. For this purpose, we take advantage of the{' '} prop! We used method to change the content model for the{' '} tag. This method is immutable: it creates a new instance. It is thus safe to use this method to create models for new tags derived from models of existing tags. You cannot set the contentModel{' '} dynamically. This is currently a limitation of the{' '} .

You can register custom renderers components with the{' '} prop. Stop talking, let's try it out. We're going to define a renderer for the element which supports press interactions: The wrapper component injected when handling{' '} onPress for nodes is defined by the {' '} prop. You can also customize the highlight color with{' '} . Also note that onPress works with textual nodes, in which case the eponym prop of React Native{' '} element will be used instead. can receive{' '} textProps prop which will be used when rendering a React Native element, and{' '} viewProps for {' '} elements.

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{' '} component: The foundry API is powerful in terms of rendering customization. It is very easy to insert child elements, while preserving the internal rendering logic. can receive a{' '} {' '} prop to customize the rendering logic for each child.

A custom renderer will receive the below props: The to render. 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,{' '} {' '} will be equal to{' '} . The flatten style object which should be passed to the root element returned by this component. To use when you render a -based element (e.g. the{' '} {' '} prop is "text"). To use when you render a -based element (e.g. the{' '} {' '} prop is "block"). To check whether a ( "text") or ( "block") is expected as the root element returned by this component. Props passed directly from the parent custom renderer via{' '} . See{' '} {' '} prop. The position relative to the parent React element, starting at 0. The total number of children of this React element parent. e.g. number of React element siblings + 1. See for a complete reference.