> 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 a `ReactContent`:

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

- Render props:

  Use `ReactWrapperComponent`'s `createRenderPropHandler()` or `createInputJsxRenderer()` if possible. if not - see [creation](#creation)

### API

```typescript
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](./Wrapper-libraries:-ReactWrapperComponent.md) this is handled for you when creating render props.

```

```