Single-SPA Microfrontends: Passing Props from Root
Rany ElHousieny, PhD???
Generative AI ENGINEERING MANAGER | ex-Microsoft | AI Solutions Architect | Generative AI & NLP Expert | Proven Leader in AI-Driven Innovation | Former Microsoft Research & Azure AI | Software Engineering Manager
Passing props from the container to microfrontends is very important in microfrontends architecture. Single-SPA layout made passing props from the root to the microfrontends easy. To explain this, I will use the example from my previous article
The code for the root can be found at
I will be using the Payment microfrontend that we created in the previous article and the code for it at:
You can pass custom props from the root to the microfrontends using the props variable in the <application> tag as follows:
We need to define "myProp" in the root config where we construct the routes using constructRoutes as follows:
Receive this prop at the payment Microfrontend?
Now, let's receive this prop at the payment microfrontend react component "Payment/src/root.component.js" as follows:
It will show on the browser as follows:
pass multiple values through props
To pass multiple values through props in a single-spa application, you can follow similar principles as passing a single value. Here's how you can do it:
1. **Define Props in Root Configuration:**
In your root configuration where you define your routes using `constructRoutes`, you can include multiple props that you want to pass to the microfrontend. For example:
```javascript
import { constructRoutes } from 'single-spa-layout';
const routes = [
?{
??path: '/payment',
??// ... other config
??props: {?
???prop1: 'value1',
???prop2: 'value2',
???prop3: 'value3',
???// ... other props
??}
?},
?// ... other routes
];
const applications = [
?// ... other apps
?constructRoutes(routes),
];
```
2. **Receive Props in Microfrontend Component:**
领英推荐
In the receiving microfrontend component, you can access these props like this:
For React:
```javascript
import React from 'react';
const RootComponent = (props) => {
?// Access the custom props passed from the root
?const prop1Value = props.prop1;
?const prop2Value = props.prop2;
?const prop3Value = props.prop3;
?// ... access other props
?// ... rest of your component code
};
export default RootComponent;
```
For Angular:
```typescript
import { Component, Input } from '@angular/core';
@Component({
?selector: 'app-root',
?template: `
??<p>Prop1 Value: {{ prop1 }}</p>
??<p>Prop2 Value: {{ prop2 }}</p>
??<p>Prop3 Value: {{ prop3 }}</p>
??<!-- ... display other props -->
?`,
})
export class RootComponent {
?@Input() prop1: string;
?@Input() prop2: string;
?@Input() prop3: string;
?// ... define other inputs
}
```
By defining and passing multiple props in the root configuration, you can access these props in your microfrontend components as needed. Just make sure to use the correct prop names when accessing them.
Remember that the naming conventions and syntax might differ slightly between React and Angular components, so make sure to adapt the code snippets according to the framework you're using.
Senior Consultant I Neudesic, an IBM company
1 年Hi Rany, Please let me know how we can pass the props to angular child microfrontend
Senior Software Engineer at Lektik
1 年Hi Rany ElHousieny , PhD??? Thanks for this much needed post. One query as in how can we pass multiple values through this props?