README
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
andreact-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.