open-index/open-npm huggingface dataset:
npm package: @olivierjm/react-mounter
Description: React Mounter lets you mount React components to DOM easily.
Latest version: 1.2.1

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

> 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 }) => <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.

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

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

```js
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:

```js
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:

```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).
npm package: @olivierpascal/helpers
Description: Miscellaneous isomorphic helpers
Author: Olivier Pascal
Latest version: 0.0.71

[![npm version](https://badge.fury.io/js/@olivierpascal%2Fhelpers.svg)](https://www.npmjs.com/package/@olivierpascal/helpers)
![npm stats](https://img.shields.io/npm/dw/@olivierpascal/helpers)
![coverage lines](./badges/coverage/badge-lines.svg)
![coverage functions](./badges/coverage/badge-functions.svg)
![dependencies](https://img.shields.io/librariesio/release/npm/@olivierpascal/helpers)
![publish workflow](https://github.com/olivierpascal/helpers/actions/workflows/npm-publish.production.yml/badge.svg?branch=production)

# @olivierpascal/helpers

## To add a new helper

1. Switch on `dev` branch with `git checkout dev`
2. Create a new file in the `src` folder, ie. `delay.ts`
3. Create a new test file in the same folder, ie. `delay.test.ts`
4. Run tests with `yarn test`
5. Import the new helper in the `src/index.common.ts` (or specifically `src/index.browser.ts` or `src/index.node.ts`) file
6. Bump the version in the `package.json` file
7. Commit and push your changes
8. Run `./scripts/deploy-to-main.sh` to deploy the new version to the production branch