Create bridge between Metal.js and React components

[mairatma]

This is something that has been requested a lot to me and @eduardolundgren already, though it wasn't documented as an issue yet, so we decided to give it a try.

And the good news is that it worked! We already have something funcional that I believe you can use with most React components. It's called metal-react.

It's really just a function that you can pass a React component to, and it will return you a Metal.js component that you can use instead. This generated component can receive any of the original props as config, and will pass them down to react automatically for you. It also allows passing children (we convert from incremental dom calls to react virtual dom elements).

An integration with Draft.js was something recently requested from you guys, so I've created a repo with an example of how to use Draft.js with metal-react. This specific example also required forcing the component using Draft.js to use sync updates (by default Metal.js updates the ui asynchronously after the state updates), since Draft.js requires it. But this shouldn't be necessary when using other components.

Let me know what you guys think, and also let me know of any use cases of this integration that I might have missed :)

[mairatma]

Just FYI, there's a simpler example showing how to use react-select too in this gist.

[mairatma]

Now that everyone knows about this I'll close this issue and we can follow further enhancements to this integration in metal-react itself :)