xored / scala-js-react

ScalaJS interface for Facebook React
Apache License 2.0
133 stars 13 forks source link

How to invoke 3rd-party js react components? #12

Open freewind opened 9 years ago

freewind commented 9 years ago

There are some js libraries defined some react components, how to use them with this project?

kanterov commented 9 years ago

Yes, you need to define interface to your 3rd-party component, for example:

@JSName("ReactBootstrap")
object ReactBootstrapJS extends js.Object {
  val ButtonToolbar: ButtonToolbar = ???
}

trait ButtonToolbar extends js.Object {
  def apply(props: js.Object, children: Seq[ReactDOM]): ReactDOM = ???
}
freewind commented 9 years ago

Could you give me an example of how to wrap react-router? I have tried for some time, but can't handle it.

The main usage is like:

var App = React.createClass({
    render: function() {
        return (
            <div>
                <Header />
                <RouteHandler/>
            </div>
        );
    }
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <DefaultRoute handler={MainPage} />
        <Route name="MyProjectsPage" handler={MyProjectsPage} />
        <Route name="ConfigPage" handler={ConfigPage} />
    </Route>
);

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.body);
});

See more here: https://github.com/dujuanxian/webpanda/blob/master/app/scripts/app.js

I tried to use the approach from your previous answer, and can't get the idea.