README.md

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

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.