Context Providers

React Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

More information on Passing Data Deeply with Context.

Available Context Providers

src/context

This folder contains useful context providers for the application. These providers centralize and manage common functionality. Below is the list of currently available context providers:

• I18nProvider
  Manages and provides translation strings for the app.
• NavigationProvider
  Tracks and stores the last visited path in the app. Facilitates redirections, such as returning the user to their previous page after actions like a successful login. Ideal for managing back-navigation behavior.
• NotificationSystemProvider
  Provides access to the app’s notification system. Allows components to interact with notifications through actions such as: addNotification, hideNotification, removeNotification.

Usage

All context providers should be implemented in the src/context folder. We expose the implemented providers by wrapping the app with them in src/app/contexts.tsx.

Example

const Contexts = ({
  children,
  i18n,
}: {
  children: ReactNode;
  i18n: Record<string, string>;
}) => {
  return (
    <NavigationProvider>
      <I18nProvider i18n={i18n}>
        <NotificationSystemProvider>{children}</NotificationSystemProvider>
      </I18nProvider>
    </NavigationProvider>
  );
};

export { Contexts };