Changing the Text or Language of the Components

All React Starter Kit components use a LocaleProvider context to manage the text they display. You can find the provider in the react-starter/utils/locale.tsx file (source code).

We recommend the following approach to change the text or language of the components:

Wrap your app with the LocaleProvider

import {
  LocaleProvider,
  type LocaleType,
  defaultLocale,
} from '@/react-starter/utils/locale';

const overrides: Partial<LocaleType> = {
  checkout: {
    ...defaultLocale.checkout,
    processing: () => <>Processing... Please wait.</>,
  },
};

export default function App() {
  return (
    <LocaleProvider overrides={overrides}>
      {/* Your app components */}
    </LocaleProvider>
  );
}

This way, you can use the default locale and override only the strings or fragments you want to change.

tip

You will notice that most locale strings are JSX elements (e.g., React.ReactNode), not just plain strings. This allows for greater flexibility, such as adding links or formatting.

Using a Translation Library

Because the locale strings are JSX elements, you can easily integrate any translation library of your choice. Here are examples with the popular lingui and react-i18next libraries.

lingui

import { Trans } from '@lingui/react/macro';
import {
  LocaleProvider,
  type LocaleType,
  defaultLocale,
} from '@/react-starter/utils/locale';

const overrides: Partial<LocaleType> = {
  checkout: {
    ...defaultLocale.checkout,
    processing: () => <Trans>Processing... Please wait.</Trans>,
  },
};

Now you can use the lingui CLI tools to extract and manage your translations.

react-18next

For the react-i18next example, you can use the useTranslation hook to get the t function and translate the strings. Note that we use the useMemo hook to avoid unnecessary re-renders.

import { useTranslation } from 'react-i18next';
import * as React from 'react';
import {
  LocaleProvider,
  type LocaleType,
  defaultLocale,
} from '@/react-starter/utils/locale';

export default function App() {
  const { t } = useTranslation();

  const overrides: Partial<LocaleType> = React.useMemo(
    () => ({
      checkout: {
        ...defaultLocale.checkout,
        processing: () => <>{t('Processing... Please wait.')}</>,
      },
    }),
    [t, defaultLocale]
  );

  return (
    <LocaleProvider overrides={overrides}>
      {/* Your app components */}
    </LocaleProvider>
  );
}

Editing the Component Source Code

warning

This approach is not recommended, as it will make it more difficult to update the components in the future.

If, for some reason, you cannot use the LocaleProvider, you can edit the source code of the components directly. The starter kit is based on shadcn/ui, so you will receive the actual component files that you can customize as needed.