Introduction
This is a fork of react-wrap-balancer, that focuses on integrating it into micro-frontend React SSR applications.
The original implementations, works great for Next.js applications - But if we have multiply instances of React, then the <Provider> pattern isn't ideal.
This fork, uses a different approach, where a <RelayoutScript> element is used to inject the <script> tag in <head>, so the <Provider> is no longer needed.
If
Usage
To start using the library, install it to your project:
npm i @charlietango/react-wrap-balancerInject the relayoutScript() function in your HTML template:
import { RelayoutScript } from '@charlietango/react-wrap-balancer'
const html = () => (
<html>
<head>
<title>App</title>
<RelayoutScript />
</head>
<body>
<div id="root" />
</body>
</html>
);If you are rendering HTML as a plain string, then you can inject the just the script code:
import { relayoutScriptCode } from '@charlietango/react-wrap-balancer'
const html = `
<html>
<head>
<title>App</title>
<script>${relayoutScriptCode}</script>
</head>
<body>
<div id="root" />
</body>
</html>
`<Balancer>
Wrap text content with the <Balancer> component, and the balancer logic will kick in:
import { Balancer } from "@charlietango/react-wrap-balancer";
function Title() {
return (
<h1>
<Balancer>My Awesome Title</Balancer>
</h1>
);
}Client-side only
To make it work with Storybook or tests, you can initialize the relayout function only on the client-side. This needs happen before you initialize the React components.
import { initWrapBalancer } from "@charlietango/react-wrap-balancer";
initWrapBalancer();