Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
freewind opened this issue Feb 7, 2015 · 2 comments
Open

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

freewind opened this issue Feb 7, 2015 · 2 comments

Comments

@freewind
Copy link

freewind commented Feb 7, 2015

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

@kanterov
Copy link
Contributor

kanterov commented Feb 7, 2015

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants