https://github.com/sparkeduab/react-mounter
a fork of react-mounter from kadira-hq
https://github.com/sparkeduab/react-mounter
Last synced: 6 days ago
JSON representation
a fork of react-mounter from kadira-hq
- Host: GitHub
- URL: https://github.com/sparkeduab/react-mounter
- Owner: SparkEdUAB
- License: mit
- Created: 2020-04-05T11:15:02.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T07:53:18.000Z (over 3 years ago)
- Last Synced: 2025-01-11T02:30:04.701Z (over 1 year ago)
- Language: JavaScript
- Size: 680 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Mounter
React Mounter lets you mount React components to DOM easily.
Note: This is a fork of [react-mounter](https://github.com/kadirahq/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](https://github.com/kadirahq/flow-router).
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](https://github.com/kadirahq/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.
```js
import React from 'react';
import { mount } from '@olivierjm/react-mounter';
const WelcomeComponent = ({ name }) =>
Hello, {name}
;
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.
```js
const MainLayout = ({ content }) => (
This is our header
{content}
);
```
Now let's try render to our `WelcomeComponent` into the `MainLayout`.
```js
mount(MainLayout, {
content: ,
});
```
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.
```js
const MainLayout = ({ content }) => (
This is our header
{content()}
);
```
> See, now content is a function.
Then, we can pass the Welcome component like this:
```js
mount(MainLayout, {
content: () => ,
});
```
## 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:
```js
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](https://github.com/kadirahq/flow-router/tree/ssr). Checkout this [sample app](https://github.com/kadira-samples/meteor-data-and-react).