mue/src/contexts/README.md

Translation System

Using Reactive Translations

The app now supports instant language switching without page refresh!

For new components

Use the useMessage hook for reactive translations:

import { useMessage } from 'contexts/TranslationContext';

function MyComponent() {
  const title = useMessage('modals.main.title');
  const description = useMessage('modals.main.description');

  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

For existing components

The old variables.getMessage() method still works but won't automatically update when language changes. Gradually migrate to useMessage for components that display translations prominently.

How it works

1. TranslationProvider wraps the app and listens for language change events
2. When language is changed via the Radio component, it emits a languageChange event
3. The provider updates the i18n instance and triggers re-renders
4. Components using useMessage automatically update to show new translations

Benefits

• No page refresh needed
• Minimal performance impact (translations already loaded)
• Backward compatible with existing code
• Smooth user experience