Translation

Usage

The useTranslation hook provides an easy way to handle translations in your React components. It supports English, Spanish, and French languages.

Basic Setup

const { t } = useTranslation({
  id: "your-component-id",
  locales,
})

Translation Methods

The hook provides two translation methods:

  1. t() - Basic translation
  2. tdynamic() - Handles dynamic translations with special handling for zero cases

Example Usage

// Basic component setup
const MyComponent = () => {
  const { t } = useTranslation({
    id: "my-component",
    locales,
  })
 
  return <Button>{t("cancelSubscription")}</Button>
}
 
// Using with modals
const ModalComponent = () => {
  const { t } = useTranslation({
    id: "modal-component",
    locales,
  })
 
  return (
    <Modal
      title={t("cancelSubscription")}
      primaryAction={{
        content: t("cancelSubscription"),
        // ... other props
      }}
    >
      <p>{t("cancelSubscriptionConfirmation")}</p>
    </Modal>
  )
}

Locale Structure

Your translations should follow this structure:

const locales = {
  en: {
    key: "English text",
    // ...
  },
  sp: {
    key: "Spanish text",
    // ...
  },
  fr: {
    key: "French text",
    // ...
  },
}

Available Languages

  • English (en)
  • Spanish (sp)
  • French (fr)

The hook will automatically fall back to English if a translation is not found in the selected language.

Adding/Removing Languages

To add a new language:

  1. Add the new locale to your translations object:
const locales = {
  en: { ... },
  sp: { ... },
  fr: { ... },
  de: {  // New German translation
    cancelSubscription: 'Abonnement kündigen',
    // ... add all required translations
  }
};
  1. Update the useTranslation hook to handle the new locale:
// In useTranslation.js
switch (locale) {
  case 'es':
    return locales.es;
  case 'fr':
    return locales.fr;
  case 'de':  // Add new case
    return locales.de;
  case 'en':
  default:
    return locales.en;
}

To remove a language:

  1. Remove the locale from your translations object
  2. Remove the corresponding case from the switch statement in useTranslation.js
LoggingAssets