@olivierjm/react-mounter v1.2.1

React Mounter

React Mounter lets you mount React components to DOM easily.

Note: This is a fork of react-mounter from kadira-hq it was no longer maintained and our project heavily depends on it.

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 @olivierjm/react-mounter react react-dom

react and react-dom are peerDependencies of @olivierjm/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 "@olivierjm/react-mounter";

const WelcomeComponent = ({ name }) => <p>Hello, {name}</p>;

mount(WelcomeComponent, { name: "Arunoda" });

Using as a Layout Manager

You can user @olivierjm/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 `@olivierjm/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.