open-index/open-npm huggingface dataset:
npm package: @one-view/plugin-loader-react
Description: Load another reactjs app as plugin
Author: Forex
Latest version: 2.3.0

# Purpose

Allow a ReactJS app to be dynamically loaded as a plugin. Also provide a ReactJS component to load the plugin.

## Usage

### Preparing the ReactJS App Plugin

Add the following lines to your `src/index.js` file. The purpose of these lines is to create an entry point to render and unmount the ReactJS app. Once added you may notice that `npm start` will render a blank page instead. Follow the next section to restore the behavior of `npm start` to allow running the ReactJS app locally.

#### src/index.js

```javascript
import { bootstrap } from 'plugin-loader-react';

bootstrap('PLUGIN_NAME', App, 'v1.0.1');
```

## Allow npm start to launch the app

The previous section would have moved the app entry point to a JavaScript function. To launch the app when we run `npm start`, we need to call the JavaScript when the app loads the first time. Add the following code to the `public/index.html`. Here we add a script section to call the entry point when the window loads.

### public/index.html

Only needed if you wish to be able to run the web app when calling `npm start`

```html
<body>
    <div id="entry" style="width: 100vw;height: 100vh;"></div>
    <script type="text/javascript">
        window.onload = () => {
            window.PLUGIN_NAME.render('entry');
        };
    </script>
</body>
```

## Loading a plugin

Once we have prepare the ReactJS app as a plugin, other ReactJS app can now load them dynamically. The following code shows how we can load another plugin dynamically. You may pass in custom data in the `detail` property. The `detail` property will appear in the plugin. If no value is passed into the `detail` prop, it will be `undefined`.

The loader by default will retry loading the plugin 3 times. The number is configurable in `retry` prop.

### Loading Another Plugin

```javascript
import Loader from 'plugin-loader-react';

class AppView {
    render = () => {
        return (
            <Loader
                history={this.props.history}
                host={'https://www.plugin.location.com'}
                name={'PLUGIN_NAME'}
                detail={{ key1: 'value1' }}
                flags={[]}
                onError={this._handleLoadError}
                retry={5}
            />
        );
    };
}
```