Introduction

React-union is a React component that allows assembling React application with a single virtual DOM from distributed HTML segments - widget descriptors.

Widget descriptors can be generated by a server technology that primarily does not support server-side rendering of JavaScript applications such as content management systems (CMS) - WordPress, Drupal or Umbraco) or Portals (Liferay or Adobe Experience Manager).

Example

For more advanced example see usage section.

Output of a server:

<main>
	<p>Static content produced by your favourite CMS.</p>


	<div id="hero-container"></div>


	<p>More static content produced by your favourite CMS.</p>

	<!-- Union widget descriptor - configuration for your React widget  -->
	<!-- Probably rendered by a server  -->
	<script
		data-union-widget="hero"
		data-union-container="hero-container"
		type="application/json"
	></script>
</main>

One of your React widgets:

// Hero.js

// Main component of your Hero widget
const Hero = () => 'I am Hero!';

// Route is an object that pairs a widget descriptor with your widget
export const route = {
	path: 'hero',
	getComponent(done) {
		done(Hero);
	},
};

export default Hero;

Main Root component:

// Root.js

import React from 'react';
import { Union } from 'react-union';

import { route } from './Hero';

// `Union` renders found widgets into their containers
// but retains a single virtual DOM. Yes, it uses React portals :)

const Root = () => <Union routes={[route]} />;

export default Root;