@remote-ui/react

What is @remote-ui/react?

@remote-ui/react is a library that allows developers to create and manage UI components remotely using React. It is particularly useful for building applications where the UI needs to be rendered in a different environment from where the logic is executed, such as in embedded apps or micro-frontends.

What are @remote-ui/react's main functionalities?

Remote Component Rendering

This feature allows you to create React components that can be rendered remotely. The code sample demonstrates how to create a remote button component that can be used in a React application.

import {createRemoteReactComponent} from '@remote-ui/react';

const RemoteButton = createRemoteReactComponent('Button');

function App() {
  return <RemoteButton onClick={() => alert('Clicked!')}>Click me</RemoteButton>;
}

Remote Context Management

This feature provides a way to manage context for remote components. The code sample shows how to set up a RemoteRoot with a RemoteReceiver to manage remote components' lifecycle and context.

import {RemoteRoot, RemoteReceiver} from '@remote-ui/react';

const receiver = new RemoteReceiver();

function App() {
  return (
    <RemoteRoot receiver={receiver}>
      {/* Remote components can be rendered here */}
    </RemoteRoot>
  );
}

Other packages similar to @remote-ui/react

react-iframe-bridge

react-iframe-bridge allows communication and rendering of React components across iframe boundaries. It is similar to @remote-ui/react in that it facilitates remote component rendering, but it is specifically designed for iframe use cases.

README

@remote-ui/react

This library provides a custom React renderer that gives you the full power of React for your remote application, and provides an optional host layer that makes it easy for existing React apps to integrate a remote root. For a full overview of how @remote-ui/react can fit in with the different pieces of Remote UI, you can refer to our comprehensive example.

Installation

Using yarn:

yarn add @remote-ui/react

or, using npm:

npm install @remote-ui/react --save

Usage

Remote environment

render()

The main entrypoint for this package, @remote-ui/react, provides the custom React renderer that outputs instructions to a @remote-ui/core RemoteRoot object. This lets you use the Remote UI system for communicating patch updates to host components over a bridge, but have React help manage your stateful application logic. To run a React ap against a RemoteRoot, use the render function exported by this library, passing in the remote root and your root React component:

// React usually has to be in scope when using JSX
import React from 'react';

// For convenience, this library re-exports several values from @remote-ui/core, like RemoteRoot
import {render, createRemoteRoot} from '@remote-ui/react';

// a host component — see implementation below for getting strong
// typing on the available props.
const Button = 'Button';

// Assuming we get a function that will communicate with the host...
const channel = () => {};

const remoteRoot = createRemoteRoot(channel, {
  components: [Button],
});

function App() {
  return <Button onClick={() => console.log('clicked!')}>Click me!</Button>;
}

render(<App />, remoteRoot);

As you add, remove, and update host components in your React tree, this renderer will output those operations to the RemoteRoot. Since remote components are just a combination of a name and allowed properties, they map exactly to React components, which behave the same way.

createRemoteReactComponent()

In the example above, our Button component was not strongly typed. Like with @remote-ui/core’s createRemoteComponent, We can use the createRemoteReactComponent function from this library to create a strongly typed component to use. @remote-ui/react’s API is the exact same as createRemoteComponent (including the same type arguments), but the value returned is both a RemoteComponentType and a ReactComponentType, both with appropriate prop types.

import {createRemoteReactComponent} from '@remote-ui/react';

const Button = createRemoteReactComponent<'Button', {onPress(): void}>(
  'Button',
);

// Type error, because onPress is missing!
const button = <Button>Save</Button>;

If you have a situation where you have separate packages for React and non-React components (e.g., to support the smaller bundle size of using only the core library), you can pass the result of calling @remote-ui/core’s createRemoteComponent to this version of the function, and the props will be inferred automatically.

import {createRemoteComponent as coreCreateRemoteComponent} from '@remote-ui/core';
import {createRemoteReactComponent} from '@remote-ui/react';

const Button = coreCreateRemoteComponent<'Button', {onPress(): void}>('Button');
const ReactButton = createRemoteReactComponent(Button);

// Still a type error!
const button = <Button>Save</Button>;

Host environment

TODO: explain exports of @remote-ui/react/host.

Other exports

This package exports a helper type for extracting information from components created by createRemoteComponent:

• ReactPropsFromRemoteComponentType accepts any type as a type argument and, if it is a remote component, returns its prop types when used as a React component.

  import {
    createRemoteComponent,
    ReactPropsFromRemoteComponentType,
  } from '@remote-ui/react';
  
  const Button = createRemoteComponent<'Button', {onPress?(): void}>('Button');
  type ButtonProps = ReactPropsFromRemoteComponentType<typeof Button>; // {onPress?(): void; children: ReactNode}