react-mounter-bensventures-flow-router-ssr

React Mounter

React Mounter lets you mount React components to DOM easily.

React Mounter supports Server Side Rendering when used with FlowRouter.

Normally, when you are rendering a React Component to the DOM, you need to do following things basically,

• Create a root DOM node as the root node for React
• Wait for the DOM to load properly
• Then render the component

React Mounter does all these for you. You just ask it to render a component.

Additionally, React Mounter can work as a simple Layout Manager where you can use with Flow Router.

Basic Usage

Install with:

npm i --save react-mounter react react-dom

react and react-dom are peerDependencies of react-mounter. So, you need to install them into your app manually.

Then let's mount a component.

import React from 'react';
import {mount} from 'react-mounter';
 
const WelcomeComponent = ({name}) => (<p>Hello, {name}</p>);
 
mount(WelcomeComponent, {name: 'Arunoda'});

Using as a Layout Manager

You can user react-mounter as a layout Manager for Flow Router. Here's how to do it.

Let's say we've a layout called MainLayout.

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content}
      </main>
    </div>
);

Now let's try render to our WelcomeComponent into the MainLayout.

mount(MainLayout, {
  content: <WelcomeComponent name="Arunoda" />
});

That's it.

To use the React Context

In order to use the React context, you need to render the content component inside the layout. So we need to pass a function instead of the React element. Here's how to do it.

const MainLayout = ({content}) => (
    <div>
      <header>
        This is our header
      </header>
      <main>
        {content()}
      </main>
    </div>
);

See, now content is a function.

Then, we can pass the Welcome component like this:

mount(MainLayout, {
  content: () => (<WelcomeComponent name="Arunoda" />)
});

Configure Root DOM node

By default React Mounter render our components into a DOM node called react-root. But, you can configure if by like below:

const {mount, withOptions} from `react-mounter`;
const mount2 = withOptions({
    rootId: 'the-root',
    rootProps: {'className': 'some-class-name'}
}, mount);
 
mount2(WelcomeComponent, {name: 'Arunoda'});

Server Side Rendering (SSR)

SSR is supported when used with FlowRouter SSR. Checkout this sample app.