Translate specific parts of app to different locales (React)

[siliconeidolon]

Hi, really enjoying the library.

We have a usecase in react where we want to have one locale for the user while also displaying specific parts of the app using another locale.

For example, the user's preferred language may be English, but they are able to create and preview a German product that should have labels etc in that language.

Currently we're using the TypesafeI18n context for the overall ui locale, but I was wondering if there's a way to create another context for the product locale and avoid conflicts. Alternatively, load multiple locales and conditionally choose which to render?

Appreciate any thoughts.

Update
Nesting the contexts with different locale values appears to work. It feels a little strange though and I can think of some usecases where it wouldn't be possible to rely on the proximity of a specific context to determine what locale to render, eg: UI elements within the product component that should still be rendered in the user's language.

Simplified example:

<TypesafeI18n locale='en'>
  <App>                         // General ui labels appear in English
    <TypeSafeI18n locale="de">
      <Product />               // Product specific labels appear in German
    </TypeSafeI18n>
  </App> 
</TypesafeI18n>

[ivanhofer]

Your solutoin with the contexts is exactly what I was thinking of.
The context approach is really flexible and you can nest them however you like. If you want certain components to be rendered in the original language then you just need to wrap them in anothr context:

export const Button = () => {
	return <>
		<TypeSafeI18n locale={rootLocale}>
			<button />
		</TypeSafeI18n>
	</>
}

[siliconeidolon]

That makes sense, thanks. I was thinking of context wrapping many components when it can indeed be scoped very specifically.