ilc-adapter-react

ilc-adapter-react

Adapter for React applications that are registered as either ILC applications or ILC/single-spa parcels.

Implements pretty much the same functionality as single-spa-react. With the following differences:

• SSR optimized. Automatically decides whenever we need to use ReactDOM.hydrate or ReactDOM.render
• 100% typed, provides advanced Typescript types
• Provides complete ILC integration out of the box. This includes: better error handling.
• Still, single-spa compatible.

Examples of usage

ILC application export:

import ilcAdapterReact, { AppLifecycleFnProps } from 'ilc-adapter-react';
import Root from './root.component';

export default ilcAdapterReact<AppLifecycleFnProps>({
    rootComponent: Root,
});

ILC Parcel export:

import ilcAdapterReact, { ParcelLifecycleFnProps } from 'ilc-adapter-react';
import Root from './root.component';

export default {
    ...ilcAdapterReact<AppLifecycleFnProps>({
        rootComponent: Root,
    }),
    parcels: {
        person: ilcAdapterReact<ParcelLifecycleFnProps>({
            loadRootComponent: () => import('./person.parcel.js').then(property('default')),
        }),
    },
};

// person.parcel.js
import React from 'react';
import { ParcelLifecycleFnProps } from 'ilc-adapter-react';

export default (props: ParcelLifecycleFnProps) => {
    return <div>Hello world</div>;
};

ILC Parcel usage:

import Parcel from 'ilc-adapter-react/parcel';

export default () => (
    <div>
        <Parcel
            loadingConfig={{ appName: '@portal/people', parcelName: 'person' }}
            wrapWith="div"
            customParam1="testProp"
        />
    </div>
);