{{ content.title }}
{{ content.description }}
{content.getStarted.main}
{content.getStarted.pageLink}
src/App.tsx and save to test HMR
),
fr: (
<>
Éditez src/App.tsx et enregistrez pour tester HMR
),
es: (
<>
Edita src/App.tsx y guarda para probar HMR
),
}),
readTheDocs: t({
en: "Click on the Vite and React logos to learn more",
fr: "Cliquez sur les logos Vite et React pour en savoir plus",
es: "Haga clic en los logotipos de Vite y React para obtener más información",
}),
},
} satisfies Dictionary;
export default appContent;
```
--------------------------------
### Using Localized Content in String Attributes (e.g., alt, src)
Source: https://intlayer.org/doc/environment/nextjs/14
Provides an example of how to correctly access localized content values when assigning them to string attributes like `src` or `alt` in JSX. It highlights the necessity of calling the `.value` property of the content object to retrieve the actual string.
```JSX
```
--------------------------------
### Dynamically Change App Locale with useLocale Hook in React
Source: https://intlayer.org/doc/environment/lynx-and-react
This example illustrates how to implement a locale switcher using the `useLocale` hook from `react-intlayer`. It demonstrates fetching available locales, displaying the current locale, and updating the application's locale, which triggers a re-render with new translations.
```tsx
import { type FC } from "react";import { getLocaleName } from "intlayer";import { useLocale } from "react-intlayer";export const LocaleSwitcher: FC = () => { const { setLocale, availableLocales, locale } = useLocale(); return (