React Layout for Meteor

announce
1

Hi,

Today, we published ReactLayout.

It’s a simple(ultra simple) layout manager for React. It can render components on both server and client. In the server it use FlowRouter’s upcoming SSR api.

Here’s a gist of what it can do:

ReactLayout.render(MainLayout, {
  content: <WelcomeComponent name="Arunoda" />
})

Give it a try: https://github.com/kadirahq/meteor-react-layout/

14 Likes
2

Just wanted to give you a big thank you! This is awesome. I’m on vacation right now, but in the coming weeks I’ll be using this more and hopefully can provide some feedback as I use it more. Thanks again!

3

Just needed to render React component using FlowRouter and this packages really helps. Thank you.

I tried use React.render(), but somehow I can’t use document.getElementById('id-name')inside FlowRouter action, getting null instead on needed element (on console everything works well).

@aruoda, I have one small question on ReactLayout.
As far as I understand, you’re rendering given React component directly into document.body, so I can’t have Blaze based layout template and for layout manager should use React component (e.g. MainLayout, like in your example). Is there any way to set where ReactLayout will render React component?

1 Like
4

Yeah this can be a serious issue since react components can’t have siblings. It’s definitely necessary to have react layout render to some container element.

5

We don’t render it to body. That’s bad and can’t do SSR in that way.
It’s rendered into a custom div called react-root. See: https://github.com/kadirahq/meteor-react-layout/blob/master/lib/react_layout.js#L5

Currently, it’s fixed. But, I’m open to customize it as well. So, send me a PR if you are interested. :slight_smile:

About FlowRouter issue. It’s action runs even before the dom gets ready. That’s by design.
We need to handle it from the layout layer.

1 Like
6

No it’s not. We do it into a different div. See my answer above.

1 Like
7

Nube question: I’m following the (excellent) Meteor Routing Guide, but I don’t understand what makes ReactLayout.render different to React.render, other than syntax.

Is it the SSR support, or is there something else this does that React.render doesn’t?

Thanks.

8

Yes. It is same from the API wise. But, ReactLayout correctly wait for DOM to be available. In FlowRouter, DOM may not be fully ready in the action. We need to wait for that.

It also has the SSR support.

That’s why we use that.

2 Likes
9

Got it. Thanks very much!

1 Like