canReactComponent( displayName, CanComponent )

Converts a can-component constructor into a React Component and updates the component’s viewModel any time the React props change.

import CanComponent from "can-component";
import canReactComponent from "can-react-component";
import ReactDOM from "react-dom";

const MyCanComponent = CanComponent.extend({ ... });
const InnerComponent = canReactComponent( "InnerComponent", MyCanComponent );

ReactDOM.render(
  <InnerComponent text="inner text" number={ 5 } />,
  document.getElementById("app")
)

Values will be passed to the viewModel in the same way they would be for a normal React Component, e.g. the text prop in the above example would provide the string "inner text" to the viewModel, number would provide the number 5, etc.

Since the component doesn’t produce DOM artifacts of its own, you won’t end up with any wrapper divs or anything else to worry about, but React Developer Tools will show you the component with the displayName in the React tree.

import React from "react";
import CanComponent from "can-component";
import canReactComponent from "can-react-component";
import stache from "can-stache";

const InnerComponent = canReactComponent(
  CanComponent.extend("InnerComponent", {
    tag: "inner-component",
    view: stache("<div class='inner'>Inner text: {{text}}</div>")
  })
);

export default class AppComponent extends React.Component {
  render() {
    return (
      <InnerComponent text="hello world" />
    );
  }
}