Ninja Pumpkin Mutants

    react-mounter

    1.2.0 • Public • Published

    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:

    npm 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.

    import React from 'react';
    import {mount} from 'react-mounter';
     
    const WelcomeComponent = ({name}) => (<p>Hello, {name}</p>);
     
    mount(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.

    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 `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.

    Keywords

    none

    Install

    npm i react-mounter

    DownloadsWeekly Downloads

    2,283

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • arunoda