MultilocaleProvider

The MultilocaleProvider component wraps your app and provides the data-fetching context needed by Multilocale's hooks.

Import

import MultilocaleProvider from '@multilocale/react/MultilocaleProvider'

Usage

function App() {
  return (
    <MultilocaleProvider>
      <YourApp />
    </MultilocaleProvider>
  )
}

How It Works

MultilocaleProvider is a thin wrapper around TanStack React Query's QueryClientProvider. It creates a QueryClient configured with suspense enabled by default:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

This means components using useTranslation will suspend while translations are loading. Wrap them with a React Suspense boundary to show a loading state:

import { Suspense } from 'react'

function App() {
  return (
    <MultilocaleProvider>
      <Suspense fallback={<div>Loading...</div>}>
        <YourApp />
      </Suspense>
    </MultilocaleProvider>
  )
}

Props

Prop	Type	Description
children	ReactNode	Your application tree