Title Helmet

This is a component that uses react-helmet to manage the title of the application. It's an easy to use, reusable component for setting the title depending on what page you're on. More about react-helmet on the official github page

1. Add Context Provider

First of there needs to be a context provider in the application. That's where TitleHelmetContextProvider comes in.

src/index.tsx

const Index = () => {  ...
  return (    <BrowserRouter basename={process.env.PUBLIC_URL}>       <TitleHelmetContextProvider moduleName="EVA Suite Orders">          <App />       </TitleHelmetContextProvider>    </BrowserRouter>  );};

Using the Title Helmet component

This is the component that sets the passed in title, overriding any title set higher up the component tree. It's often used to set the page title of the current chapter.

src/pages/orders/OrdersOverviewPage.tsx

const OrdersOverviewPage = () => {  const intl = useIntl();
  // Get your title translation  const title = intl.formatMessage({    id: 'orders.overview.title',  });
  return (    <>      <TitleHelmet title={title} />      <Pane sideBarContent={<OrdersSidebar />}>        <ErrorBoundary>          <Box>            <Breadcrumbs              showBackButton={false}              breadcrumbs={[                {                  name: title,                  url: '/orders',                },              ]}            />            <ErrorBoundary>              <OrdersOverview />            </ErrorBoundary>            <div />          </Box>        </ErrorBoundary>      </Pane>    </>  );};

Note that the module name passed to the provider will be appended to the current title. For example, considering that the title of the Orders Overview in the above example is 'Orders Overview', you will notice the complete page title being set as 'Orders Overview | EVA Suite Orders'.