Create a widget
This tutorial asumes that you already bootstrapped an extension as explained here.
After the bootstrap is done, change directory to the extension you've just created and add a new folder src
Now let's create the entry file for the widget.
touch src/index.ts
Open the index file and create and export the registration function
export widget's registration function
export const register = () => {
return {};
};
Next, we'll need to add the following properties to the config object:
Required | Description | |
---|---|---|
loadingFn | true | the loading function |
mountsIn | true | where to show this widget |
Let's create a simple React component in a new file in the src
folder.
touch src/my-widget-component.tsx
This file will be dynamically imported using the loadingFn
and must export single-spa-react
lifecycle methods:
src/my-widget-component.tsx
import React from "react";
import ReactDOMClient from "react-dom/client";
import singleSpaReact from "single-spa-react";
const MyWidget = () => {
return <div>Hello World</div>;
};
export const { bootstrap, mount, unmount } = singleSpaReact({
React,
ReactDOMClient,
rootComponent: MyWidget,
errorBoundary: () => {
return <div>Error in widget</div>;
},
});
Now we are ready to complete the configuration of our widget:
export const register = (options: IntegrationRegistrationOptions) => {
return {
loadingFn: () => import("my-widget-component"),
mountsIn: options.layoutSlots.widgetSlotId,
};
};
Well done! Now if you rebuild the project you will see the widget in the right side of the page.