Custom root component

[adenta]

If I am mounting a react component from turbo, is it possible to customize the “root” wrapper?

for example, I’m using chakra ui component library. To use chakra with turbo mount, I would need to wrap every component in the ChakraProvider. It would be nice to not need to do that.

[skryukov]

Hey @adenta, thanks for the request!

I believe we can use a custom plugin for this:

// Add this file as, for example, utils/chakraPlugin.ts
// Then replace `import { registerComponent } from "turbo-mount/react";`
// with `import { registerComponent } from "/utils/chakraPlugin";`

import { buildRegisterFunction, Plugin, TurboMount } from "turbo-mount";
import { ComponentType, createElement } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";

const plugin: Plugin<ComponentType> = {
  mountComponent: (mountProps) => {
    const { el, Component, props } = mountProps;
    const root = createRoot(el);

    root.render(
      createElement(ChakraProvider, null, createElement(Component, props))
    );

    return () => {
      root.unmount();
    };
  },
};

const registerComponent = buildRegisterFunction(plugin);

export { TurboMount, registerComponent };

export default plugin;

[MrHubble]

Would a similar approach be used to take advantage of the Tailwind UI stacked layout component?

From my limited understanding using dangerouslySetInnerHTML to render the rails view is not ideal, but I think it's the most straightforward option we have.