React

AppContext provides data from App in a way that React components can readily consume, even if it's mutable data. AppContext contains the following data structure:

{
  authenticatedUser: <THE App.authenticatedUser OBJECT>,
  config: <THE App.config OBJECT>
}

If the App.authenticatedUser or App.config data changes, AppContext will be updated accordingly and pass those changes onto React components using the context.

AppContext is used in a React application like any other `React Context

A wrapper component for React-based micro-frontends to initialize a number of common data/ context providers.

subscribe(APP_READY, () => {
  ReactDOM.render(
    <AppProvider>
      <HelloWorld />
    </AppProvider>
  )
});

This will provide the following to HelloWorld:

• An error boundary as described above.
• An AppContext provider for React context data.
• IntlProvider for @edx/frontend-i18n internationalization
• Optionally a redux Provider. Will only be included if a store property is passed to AppProvider.
• A Router for react-router.

A react-router route that redirects to the login page when the route becomes active and the user is not authenticated. If the application has been initialized with requireAuthenticatedUser false, an authenticatedPageRoute can be used to protect a subset of the application's routes, rather than the entire application.

It can optionally accept an override URL to redirect to instead of the login page.

Like a PageWrap, also calls sendPageEvent when the route becomes active.

An error page that displays a generic message for unexpected errors. Also contains a "Try Again" button to refresh the page.

A React component that, when rendered, redirects to the login page as a side effect. Uses redirectToLogin to perform the redirect.

A Wrapper component that calls sendPageEvent when it becomes active.

A React hook that allows functional components to subscribe to application events. This should be used sparingly - for the most part, Context should be used higher-up in the application to provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub mechanism.

A React hook that tracks user's preferred color scheme (light or dark) and sends respective event to the tracking service.