Skip to main content

DSLocaleProvider

The DSLocaleProvider is the root provider for the MyUnisoft Design System. It handles internationalization (i18n) for all DS components and must wrap your application (or the part using DS components).

Installation​

yarn add @myunisoft/design-system

Basic Usage​

import { DSLocaleProvider } from '@myunisoft/design-system';

const App = () => {
  return (
    <DSLocaleProvider>
      {/* Your application */}
    </DSLocaleProvider>
  );
};

Props​

NameTypeRequiredDefaultDescription
childrenReactNodeYes-The application content
locale'fr' | 'en'No'fr'The language to use for DS component translations

Integration with Host Application i18n​

When your application already uses react-i18next for internationalization, you can synchronize the DS translations with your app's language by passing the current locale:

import { DSLocaleProvider } from '@myunisoft/design-system';
import { useTranslation } from 'react-i18next';

const App = () => {
  const { i18n } = useTranslation();
  
  return (
    <DSLocaleProvider locale={i18n.language as 'fr' | 'en'}>
      {/* Your application */}
    </DSLocaleProvider>
  );
};

Reacting to Language Changes​

The useTranslation hook is reactive by design — it automatically triggers a re-render when the language changes. This means the locale prop passed to DSLocaleProvider will update automatically:

import { DSLocaleProvider } from '@myunisoft/design-system';
import { useTranslation } from 'react-i18next';

const App = () => {
  const { i18n } = useTranslation();
  
  const handleLanguageChange = (lang: 'fr' | 'en') => {
    i18n.changeLanguage(lang);
    // useTranslation causes a re-render, updating the locale prop
  };
  
  return (
    <DSLocaleProvider locale={i18n.language as 'fr' | 'en'}>
      <button onClick={() => handleLanguageChange('en')}>English</button>
      <button onClick={() => handleLanguageChange('fr')}>Français</button>
      {/* DS components will update their translations */}
    </DSLocaleProvider>
  );
};

export default App;

That's it — no additional wrappers needed. The useTranslation hook subscribes to language change events internally, ensuring your component re-renders when i18n.changeLanguage() is called.

Architecture​

The Design System manages its own internal i18n instance (internalI18n) with DS-specific translations. This architecture provides:

  • Isolation: DS translations don't pollute the host application's translation namespace
  • No context shadowing: DS components use useDSTranslation() which bypasses React context resolution
  • Simplicity: No need to manually merge translation files
  • Flexibility: Works standalone or integrated with any i18n setup
┌─────────────────────────────────────────────────────────┐
│  Host Application                                       │
│                                                         │
│  i18n (default instance)     internalI18n (DS instance) │
│        ↓                            ↓                   │
│  useTranslation()            useDSTranslation()         │
│  (app translations)          (DS translations)          │
│                                                         │
│  ┌───────────────────────────────────────────────────┐  │
│  │  DSLocaleProvider (locale={i18n.language})         │  │
│  │  → Syncs language to internalI18n                 │  │
│  │  ┌─────────────────────────────────────────────┐  │  │
│  │  │  App + DS Components                        │  │  │
│  │  │  (both hooks work without conflict)         │  │  │
│  │  └─────────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────┘

Supported Languages​

Currently, the Design System supports:

  • French (fr) - Default
  • English (en)