React SRM Wrapper

Easily integrate SRM into your React application

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

importReactfrom'react'import{ReactSRMWrapper}from'@nicecactus/react-srm-wrapper';constMyModuleLoader=()=>{return(<><h2>React SRM wrapper</h2><ReactSRMWrapperassetManifestUrl={process.env.REACT_APP_ASSET_MANIFEST_URL!}exportPath="myOrg.myModule"basename="/my-module"/></>)};exportdefaultMyModuleLoader;

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.