Localisation

Wrap the app in I18nProvider, which this package re-exports, and every word the components write follows its locale.

import { I18nProvider } from '@kanso-labs/kanso-ui'

export function App({ children }: { children: React.ReactNode }) {
  return <I18nProvider locale="pt-BR">{children}</I18nProvider>
}

What gets translated

React Aria names most of the controls the components draw, in some thirty languages: an overlay’s dismiss button, a field’s clear button and steppers, a snackbar’s close, a chip’s remove, a row’s selection box, a column’s resize handle, a picker’s trigger and a colour picker’s strips. Five strings have no word in React Aria, so this package carries them in the same locales React Aria ships:

the ring a pending Button or IconButton shows,
a collection’s loading-more row,
CopyField’s button, and what it announces once it has copied,
a field’s character limit.

Those translations are the package’s own, and a wrong one is worth an issue.

Using your own words

Every string sits behind a prop for the call site’s own words:

Prop	Where
`pendingLabel`	`Button`, `IconButton`
`label`	`LoadMore`
`copyLabel`, `copiedLabel`	`CopyField`
`characterLimitLabel`	fields with a character limit
`clearLabel`, `closeLabel` and the rest	the names React Aria gives

Numbers follow the provider too: Currency writes its amount, and a field its character count, in the locale’s digits and grouping. A right-to-left locale turns the layout over, overlays included.

Ship only the locales you support

A bundler includes every language React Aria ships unless told which ones the app supports. @react-aria/optimize-locales-plugin is how an app says so. Install it as a development dependency and give it the locales the app hands I18nProvider.

Next.js (Turbopack)
Vite

Needs Next.js 15.4 or newer. The plugin’s rules spread into turbopack.rules:

next.config.ts

import optimizeLocales from '@react-aria/optimize-locales-plugin'

const locales = optimizeLocales.turbopack({ locales: ['en-US', 'de-DE'] })

export default {
  turbopack: { rules: { ...locales.rules } },
}

The object is left untyped on purpose. The plugin types locales as a read-only array, which NextConfig does not accept, so const config: NextConfig fails Next.js’s type check over the same rules.

vite.config.ts

import optimizeLocales from '@react-aria/optimize-locales-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [optimizeLocales.vite({ locales: ['en-US', 'de-DE'] })],
})

React Aria’s strings for every other locale then build to nothing. The plugin’s own README covers webpack, Rollup and esbuild. The plugin reaches React Aria’s tables alone. This package’s five strings are one module holding every locale, included whole wherever a component uses it.

⌘I

Web

React Native

Core

What gets translated

Using your own words

Ship only the locales you support

​What gets translated

​Using your own words

​Ship only the locales you support

What gets translated

Using your own words

Ship only the locales you support