Skip to content

studiointeract/react-mount

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Mount Layout

React Mount Layout lets you mount React 15.x components to DOM and the Server easily.

React Mount Layout 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 Mount Layout does all these for you. You just ask it to render a component.

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

Basic Usage

Install with:

npm i --save react-mount-layout react react-dom

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

Then let's mount a component.

import React from 'react';
import {mount} from 'react-mount-layout';

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

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

Using as a Layout Manager

You can use react-mount-layout 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 Mount Layout render our components into a DOM node called react-root. But, you can configure if by like below:

const {mount, withOptions} from `react-mount-layout`;
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.

About

A simple way to mount React components

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.0%
  • Shell 2.0%