kadirahq/react-mounter

Name: react-mounter

Owner: KADIRA

Description: A simple way to mount React components

Created: 2016-01-13 10:59:27.0

Updated: 2018-03-29 08:56:44.0

Pushed: 2017-10-30 00:44:04.0

Homepage: null

Size: 18

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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:

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.

rt React from 'react';
rt {mount} from 'react-mounter';

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

t(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.

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

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

t(MainLayout, {
ntent: <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.

t 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:

t(MainLayout, {
ntent: () => (<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:

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

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

Server Side Rendering (SSR)

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