An example approach to leveraging Lattice in a Front End React App

Lattice-Example-App.tsx

import { Pluggable, PluginHost, usePluggableState } from '@netflix-internal/rgt-components/lib/lattice';
import { getDefaultRoutes } from '../routes';
import { Content, Header, Router } from './components';
import { useFetchPluginConfiguration } from './hooks';

export const App = ({ appName }: { appName: string }) => {
  // Fetch plugin host configuration remotely for this application
  const config = useFetchPluginConfiguration(appName);

  // Allow for routes to be extended by plugins
  const routes = usePluggableState('AppRoutes', null, getDefaultRoutes());

  return (
    <PluginHost {...config}>{/* Host will load remote modules */}
      <Router routes={routes}>
        <Header appName={appName} links={routes} />
        <Pluggable identifier="AppContent">{/* Plugins can override these children */}
          <Content />
        </Pluggable>
      </Router>
    </PluginHost>
  );
};