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, My plan is to keep this fork updated and recognize its importance.

Todo:

• Remove SSR in this version
• Make sure all deps are up to date
• Include the github package
• Expose only one default export in the whole package

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.

importReactfrom'react';import{mount}from'@olivierjm/react-mounter';constWelcomeComponent=({ 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.

constMainLayout=({ 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: <WelcomeComponentname="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.

constMainLayout=({ 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: ()=><WelcomeComponentname="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`;constmount2=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.