React i18n eenvoudig gemaakt
Typeveilige internationalisatie voor React-applicaties met hooks, context en naadloze CDN-distributie.
Get started in 3 steps
Install
Add @better-i18n/use-intl and use-intl to your project.
npm install @better-i18n/use-intl use-intl
Wrap your app with BetterI18nProvider
Place the provider at the root of your component tree. It fetches messages from the CDN and makes them available via hooks.
import { BetterI18nProvider } from '@better-i18n/use-intl';
function App() {
return (
<BetterI18nProvider project="your-org/your-project" locale="en">
<YourApp />
</BetterI18nProvider>
);
}Use translations
Call useTranslations() in any component to access your translation keys with full TypeScript support.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return <h1>{t('welcome')}</h1>;
}Functies
Installation & Setup
Get started with @better-i18n/use-intl in three steps — install, wrap your app with the provider, and start translating.
# 1. Install
npm install @better-i18n/use-intl
# 2. Wrap your app
import { BetterI18nProvider } from '@better-i18n/use-intl'
function App() {
return (
<BetterI18nProvider project="org/project" locale="en">
<YourApp />
</BetterI18nProvider>
)
}
# 3. Use translations
import { useTranslations } from '@better-i18n/use-intl'
function MyComponent() {
const t = useTranslations('common')
return <h1>{t('welcome')}</h1>
}Werkt met populaire React i18n-libraries
Better i18n vervangt je favoriete i18n-library niet, maar is de vertaalmanagementlaag die ze krachtiger maakt.
Better i18n + react-intl
De populairste React i18n-library met ondersteuning voor ICU-berichtformaat. Gebruikt door duizenden productie-apps.
Better i18n synchroniseert je vertalingen direct naar react-intl JSON-formaat. Bewerk in dashboard en zie wijzigingen meteen in je app.
Better i18n + react-i18next
Krachtig i18n-framework voor React gebaseerd op i18next. Functies zoals namespaces, interpolatie en meervouden ingebouwd.
Exporteer naar i18next-compatibele JSON met namespaces. Better i18n beheert de vertaalworkflow, i18next de runtime.
Better i18n + FormatJS
Een set libraries voor internationalisatie met onder andere react-intl. Ondersteunt ICU Message-syntaxis en CLDR-data.
Better i18n ondersteunt ICU-berichtformaat standaard. Beheer complexe meervouden en selecties visueel en exporteer naar FormatJS-formaat.
Better i18n + Lingui
Een leesbare, geautomatiseerde en geoptimaliseerde i18n-library. Sterke DX met macro-gebaseerde message-extractie.
Extraheer berichten met Lingui CLI, beheer vertalingen in Better i18n en sync automatisch terug via GitHub-integratie.
Snelle start
Ga in minuten aan de slag met Better i18n in je React-app.
import { useTranslations } from '@better-i18n/use-intl';
function MyComponent() {
const t = useTranslations('common');
return (
<div>
<h1>{t('welcome')}</h1>
<p>{t('greeting', { name: 'World' })}</p>
</div>
);
}Related Articles
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung
Django i18n mit KI-Übersetzung: Vollständige Einrichtungsanleitung Django wird mit einem ausgereiften Internationalisierungs-Framework (i18n) geliefert,...
Read more →Developer Experience Deep Dive: How Better i18n's Platform UX Makes Localization Fast and Intuitive
Localization platforms have a reputation for clunky interfaces, slow editors, and workflows that feel like they were designed by committee. We built...
Read more →Media Management with Unsplash Integration: A Complete CMS Guide
Managing media alongside translations has always been an afterthought in most i18n tools. You translate the text, then manually handle images in a...
Read more →Begin met bouwen met React i18n
Gratis pakket beschikbaar. Geen creditcard vereist.