1. Union Component
  2. Installation
  3. Introduction
  4. Union
  5. Widget Descriptors
  6. Common Data Descriptors
  7. withWidgetContext()
  8. Utilities
  9. FAQ
  1. Scripts
  2. Installation
  3. Introduction
  4. Usage
  5. Monorepo
  6. CLI
  7. Configuration
  8. Testing
  9. Recipes
  1. Boilerplates
  2. Basic
  3. Monorepo
  4. Liferay

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;