Translations

Set the words Koala components say on their own once, for a whole app, in any language.

Set a language#

Components carry a few words of their own: the name of a close button, a tooltip, what a screen reader hears. Wrap your app in LabelsProvider and they all change at once. Spanish ships ready to use.

app/layout.tsxTSX

import { LabelsProvider } from "@/lib/labels"
import { labelsEs } from "@/lib/labels-es"

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body>
        <LabelsProvider labels={labelsEs}>{children}</LabelsProvider>
      </body>
    </html>
  )
}

Change a few words#

labels takes any subset, and providers nest, so one screen can reword a label while the rest of the app keeps its own. A prop on the component still wins over all of them.

checkout.tsxTSX

<LabelsProvider labels={{ confirm: "Pay now" }}>
  <Keypad>…</Keypad>
</LabelsProvider>

<KeypadConfirm>Charge</KeypadConfirm>

Add a language#

Type your dictionary as Labels and the compiler lists every word you still owe. Counts are functions, so each language writes its own plurals.

lib/labels-fr.tsTSX

import { defaultLabels, type Labels } from "@/lib/labels"

export const labelsFr: Labels = {
  ...defaultLabels,
  close: "Fermer",
  pageCount: (count) => `${count} page${count > 1 ? "s" : ""}`,
}

What it covers#

Today: Dialog, File Preview, Keypad, Number Field, Number Input, On-Screen Keyboard, Order Summary, Pagination and Tab Strip. Other components take their words as props, and join this list as they move over.