Skip to content

Instantly share code, notes, and snippets.

@luistak
Created January 27, 2021 15:44
Show Gist options
  • Save luistak/7329a1f48b8c2235fb02b233b33774ed to your computer and use it in GitHub Desktop.
Save luistak/7329a1f48b8c2235fb02b233b33774ed to your computer and use it in GitHub Desktop.
const App = ({ microfrontends }) => {
const [messages, setMessages] = useState([]);
const handleNewMessage = (message) => {
setMessages((currentMessages) => currentMessages.concat(message));
};
return (
<main className="App">
<div className="App__header">
<h1>⚔️ Cross microfrontend communication 📦</h1>
<p>Workerized example</p>
</div>
<div className="App__content">
<div className="App__content-container">
{
Object.keys(microfrontends).map(microfrontend => (
<Microfrontend
key={microfrontend}
microfrontend={microfrontends[microfrontend]}
customProps={{
messages,
onNewMessage: handleNewMessage,
}}
/>
))
}
</div>
</div>
</main>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment