https://rcoedo.com/blog/2018/01/08/render-components-elsewhere-with-react-conduit

Examples for "Render Components Elsewhere with react-conduit"

This gist contains the examples for the article "Render Components Elsewhere with react-conduit".

- https://medium.com/trabe/render-components-elsewhere-with-react-conduit-9374680ef21a
- https://rcoedo.com/blog/2018/01/08/render-components-elsewhere-with-react-conduit

react-conduit-cross-application-example.js

import React from "react";
import ReactDOM from "react-dom";
import { Inlet, Outlet, ConduitProvider, Registry } from "react-conduit";

// We create a new registry
const registry = new Registry();

// And a custom provider that uses that registry
const MyCustomConduitProvider = ({ children }) => (
  <ConduitProvider registry={registry}>
    {children}
  </ConduitProvider>
);

// We define two different Apps. The first app will render stuff in the second app
const App1 = () => (
  <MyCustomConduitProvider>
    <Inlet label="conduit1">
      This will be rendered in app2
    </Inlet>
  </MyCustomConduitProvider>
);


const App2 = () => (
  <MyCustomConduitProvider>
    <Outlet label="conduit1" />
  </MyCustomConduitProvider>
);

// And finally we render each app in the dom
ReactDOM.render(<App1 />, document.getElementById("app1"));
ReactDOM.render(<App2 />, document.getElementById("app2"));

react-conduit-detached-components-example.js

import React from "react";
import { Inlet, Outlet } from "react-conduit";

// The article component accepts a wrapper for the toolbar. By default it's just a div.
const ArticleEditor = ({ article, ToolbarWrapper = div }) => (
  <div>
    <ToolbarWrapper>
      <MyAmazingToolbar />  
    </ToolbarWrapper>
  
    <div className="title">{article.title}</div>
    <div className="content">{article.content}</div>
  </div>
);

// Now if the parent wants to break the article editor in parts,
// it just needs to pass an Inlet as the wrapper and render an outlet
// where needed.
const ParentComponent = () => {
  const article = { id: 1, title: "Just a title", content: "Just the content" };
  const ToolbarWrapper = ({ children }) =>
    <Inlet label={`article-editor-${article.id}`}>{children}</Inlet>;
  
  return (
    <div>
      <ArticleEditor article={article} ToolbarWrapper={Wrapper} />

      <div className="my-toolbar-container">
        <Outlet label={`article-editor-${article.id}`} />
      </div>
    </div>
  );
};

react-conduit-layering-example.js

import React from "react";
import { Inlet, Outlet, ConduitProvider } from "react-conduit";

// We define the outlet, elements will be rendered here
const ModalLayerOutput = () => (
  <Outlet label="modal-layer" />
);

// Anything rendered inside a ModalLayer will be sent to its output
const ModalLayer = ({ children }) => (
  <Inlet label="modal-layer">
    {children}
  </Inlet>
);

// Our over-simplistic modal component
const Modal = ({ visible, children }) => {
  if (!visible) {
    return null
  }

  return (
    <ModalLayer>
      <div>
        {children}
      </div>
    </ModalLayer>
  );
}

// This is our application's layout.
const Layout = () => (
  <ConduitProvider>
    <div>
      <div>
        <Modal visible>
          This is the content!
        </Modal>
      </div>
      <div className="my-layers">
        <ModalLayerOutput />
      </div>
    </div>
  </ConduitProvider>
);