Skip to content

Instantly share code, notes, and snippets.

@Vnthf
Forked from mpossumato-netflix/Lattice-Example-App.tsx
Created November 16, 2021 03:42
Show Gist options
  • Save Vnthf/b60d0df90d6d43af61e30cda70237681 to your computer and use it in GitHub Desktop.
Save Vnthf/b60d0df90d6d43af61e30cda70237681 to your computer and use it in GitHub Desktop.
An example approach to leveraging Lattice in a Front End React App
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>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment