jsx/tsx support

[tiwka19]

is there any way to translate a jsx component? If not, will there be such an opportunity in the future?

[jlarmstrongiv]

You can pass the translated content title={t('title')} or locale locale={locale} as props to JSX components.

One complication is context or other global state wrappers may not work with Astro islands.

Translations usually live in a separate place like json files or databases, not in frontend components.

[tiwka19]

You can pass the translated content title={t('title')} or locale locale={locale} as props to JSX components.

One complication is context or other global state wrappers may not work with Astro islands.

Translations usually live in a separate place like json files or databases, not in frontend components.

Sorry, but could you please show an example? How to pass the current locale to a jsx component? Because getLocale(Astro.url) won't work. Sorry for stupid questions, I'm a newbie

[jlarmstrongiv]

I encourage you to read through:

• the Astro component docs https://docs.astro.build/en/core-concepts/astro-components/
• the framework UI docs https://docs.astro.build/en/core-concepts/framework-components/
• the quickstart tutorial https://docs.astro.build/en/tutorial/0-introduction/

---
import { getLocale } from "astro-i18n-aut";
import Layout from '../layouts/MyLocaleLayout.tsx';
import { DEFAULT_LOCALE } from "../consts";

const locale = getLocale(Astro.url) ?? DEFAULT_LOCALE;
---

<Layout locale={locale} />

The ?? DEFAULT_LOCALE is needed because we can’t parse the DEFAULT_LOCALE from a url that does not contain the locale. See https://github.com/jlarmstrongiv/astro-i18n-aut/blob/main/src/edge-runtime/getLocale.ts#L2

Or, in your Layout component, you can make the locale prop optional and default it to the DEFAULT_LOCALE. It just depends on which works better for your setup.