olegwock / inject-react-anywhere Goto Github PK

Sometimes we need to portal part of component to other place (usually to work around stacking contexts). Most likely it will be end of body (or shadow at end of body).

It will be very handy to have utility which could handle this. Something like:

const CalendarEventPageInfo = createInjectableComponent(Component, {
    styles: combineStyleInjectors(
        stringStyles([componentStyles]),
        emotion(),
    ),
});


const portalController = await createPortalFor(CalendarEventPageInfo);
document.body.append(portalController.shadowHost);

const componentController = await injectComponent(CalendarEventPageInfo, {portalInto: portalController.portalInto});
document.querySelector('.some-modal-window-for-example').append(componentController.shadowHost);

And inject-react-anywhere will automatically mirror all styles to portal shadow root.

Currently (because of mutation observer), it's possible to have FOUC when using CSS-in-JS because styles are copied with small delay. It might be good idea to implement custom Sheet and Tag to support multiple targets for injection.

Related:

https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/sheet/Sheet.ts#L78C41-L78C41
https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/sheet/Tag.ts#L5