olivierjm/react-mounter

React Mounter lets you mount React components to DOM easily.

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.

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.

react-mounter's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency sinon to v14

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency chai to v4.3.6
• Update dependency nodemon to v2.0.20
• Update dependency sinon to v11.1.2
• Update dependency eslint to v7.32.0
• Update dependency eslint-plugin-react to v7.31.8
• Update dependency mocha to v9.2.2
• Update react monorepo to v16.14.0 (react, react-dom)
• Update dependency eslint to v8
• Update dependency mocha to v10
• Update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• babel-runtime 6.26.0
• domready 1.0.8
• babel-cli 6.26.0
• babel-core 6.26.3
• babel-eslint 10.1.0
• babel-plugin-react-require 3.1.3
• babel-plugin-transform-runtime 6.23.0
• babel-polyfill 6.26.0
• babel-preset-es2015 6.24.1
• babel-preset-react 6.24.1
• babel-preset-stage-2 6.24.1
• chai 4.3.4
• eslint 7.7.0
• eslint-plugin-babel 5.3.1
• eslint-plugin-react 7.20.5
• mocha 9.0.2
• mock-require 3.0.3
• nodemon 2.0.12
• react 16.13.1
• react-dom 16.13.1
• sinon 11.1.1
• react 16.x.x || 17.x.x
• react-dom 16.x.x || 17.x.x

---

• Check this box to trigger a request for Renovate to run again on this repository

remove SSR support

our current project doesn't need to use server side rendering so there is no need to support it in this library, plus the removal of this will help keep the bundle size small.

reduce bundle size

this will be achieved by removing the unecessary methods that the library offers just to focus on our need

remove some dependencies

one example is the domready package, I will do a stress test to make sure we don't have to depend on it anymore.

Plan for a v2 release

This will include breaking changes, as it will no longer support SSR.