Getting Started

Overview

For Vite + React apps, translations are loaded on the client after the initial render. The SDK handles:

Automatic message fetching - Loads translations from CDN on mount
Locale switching - Change languages without page reload
Caching - Efficient in-memory caching for repeated requests

Vite apps are client-side only (no SSR). For server-side rendering, see TanStack Start or Next.js.

Features

Zero Config

Point to your project and go - translations load automatically from the CDN.

React Suspense

Native Suspense support for elegant loading states.

Type Safety

Full TypeScript support with autocomplete for translation keys.

Locale Storage

Built-in localStorage persistence for user locale preference.

Quick Start

src/App.tsx

import { BetterI18nProvider } from '@better-i18n/use-intl'

function App() {
  return (
    <BetterI18nProvider
      project="your-org/your-project"
      locale="en"
    > // [!code ++]
      <YourApp />
    </BetterI18nProvider> 
  )
}

src/components/Hello.tsx

import { useTranslations } from '@better-i18n/use-intl'

export function Hello() {
  const t = useTranslations('home') 

  return <h1>{t('title')}</h1>
}