Render any
HTMLElement
s as a child of React components.
This is mainly used to passing in <ng-content>
as children
to React.
Usage
When authoring wrapper components that need to use:
-
<ng-content>
, wrap it in aReactContent
:<Button [text]="text"> <ReactContent> <ng-content></ng-content> </ReactContent> </CompoundButton>
-
Render props:
Use
ReactWrapperComponent
'screateRenderPropHandler()
orcreateInputJsxRenderer()
if possible. if not - see creation
API
interface ReactContentProps {
/**
* Use the legacy rendering mode.
*
* Uses a similar approach to `router-outlet`, where the child elements are added to the parent, instead of this node, and this is hidden.
*
* @default false
*/
legacyRenderMode?: boolean;
}
ReactContent
by default will use a similar approach to what <router-outlet>
does in Angular - render the HTML content as a sibling, and set display: none
on itself.
If you need to out-out of this behavior for some reason, you can pass in legacyRenderMode
as true
to get the old behavior, where the DOM nodes get appended as children of the <react-content>
element.
This may change in the future, depending on work done in that regard. See TODO
s in the relevant code for more info on directions and possibilities.
Creation
Since it uses some APIs that do not translate over directly to JSX as you'd expect, use the createReactContentElement
factory function to create it.
Alternatively, when using the ReactWrapperComponent this is handled for you when creating render props.