Table of contents

• Quick start
• API Reference

Quick start

Install @nicecactus/react-srm-wrapper:

• with npm: npm install -S @nicecactus/react-srm-wrapper
• with yarn: yarn add @nicecactus/react-srm-wrapper

Create a loader component for your SRM.
We will assume that:

• the asset-manifest.json file url is stored in .env
• once loaded, the SRM render() function is exposed in window.myOrg.myModule
• the module will be served with the relative path /my-module

MyModuleLoader.tsx

import React from 'react'
import { ReactSRMWrapper } from '@nicecactus/react-srm-wrapper';

const MyModuleLoader = () => {
  return (
    <>
      <h2>React SRM wrapper</h2>
      <ReactSRMWrapper assetManifestUrl={process.env.REACT_APP_ASSET_MANIFEST_URL!} exportPath="myOrg.myModule" basename="/my-module" />
    </>
  )
};

export default MyModuleLoader;

Expose the loader in your router (example for React Router)

API Reference

ReactSRMWrapper

||| |-|-| | Selector | ReactSRMWrapper |

Inputs

||| |-|-| | assetManifestUrl | Type: string URL to the asset-manifest.json. | | exportPath | Type: string Path to the exported render() function once the module has been loaded. | | basename | Type: string Default value: / Relative path the module is being served from. | | language | Type: string Default value: en Language used for i18n. | | arguments | Type: object Default value: {} Extra arguments to pass to the render() function. | | eventHandlers | Type: object Default value: {} Custom events that can be called by the SRM. |

Outputs

||| |-|-| | loaded | Type: (el: HTMLElement) => any Emits an event when the module has been loaded. | | rendered | Type: (args: any) => any Emits an event when the module has been rendered. |