Wrapper libraries: Helper components: ReactContent

Render any HTMLElements 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 a ReactContent:

  <Button [text]="text">
      <ReactContent>
          <ng-content></ng-content>
      </ReactContent>
  </CompoundButton>

• Render props:

  Use ReactWrapperComponent's createRenderPropHandler() or createInputJsxRenderer() 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 TODOs 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.