Languages & RTL

Translate the texts the components bring with them, set the locale of the date components and run any skin right to left.

Built-in textsCopy Anchor Link

Most text in a Camaleo interface is yours: labels, titles, button text. A few components also bring texts of their own, like a close button's name, an empty table's message or "Page 3" for a screen reader. Those are English by default.

Put one MessagesProvider near the root to change them. Pick a language below: only the component texts change.

import { MessagesProvider } from "@camaleo/react";

<MessagesProvider locale="pt-BR">{children}</MessagesProvider>

locale picks a bundled set: "en" (the default) or "pt-BR". A prop on the component always wins over the provider, so <Pagination previousLabel="Back" /> keeps "Back".

Change a few textsCopy Anchor Link

messages takes any subset of the keys. Each group you pass is merged over the set below it, so you only write what changes:

<MessagesProvider
  locale="pt-BR"
  messages={{ drawer: { close: "Fechar painel" }, dataTable: { empty: "Nenhum pedido ainda." } }}
>
  {children}
</MessagesProvider>

Providers nest. An inner provider without locale starts from its parent's texts, which is handy for one area with its own wording:

<MessagesProvider messages={{ dataTable: { empty: "No orders match these filters." } }}>
  {children}
</MessagesProvider>

For a language Camaleo doesn't bundle, write a full set typed as Messages and pass it as messages. The type makes sure no key is missing.

Server or clientCopy Anchor Link

Some messages are functions, like pagination.page(3) → "Page 3". React can't pass functions from a Server Component to a client one, so:

• From a Server Component (a root layout), pass locale and string-only messages.
• To override a function, put the provider in a client component:

"use client";
import { MessagesProvider } from "@camaleo/react";

export function AppMessages({ children }: { children: React.ReactNode }) {
  return (
    <MessagesProvider
      locale="pt-BR"
      messages={{ pagination: { page: (page) => `Ir para a página ${page}` } }}
    >
      {children}
    </MessagesProvider>
  );
}

Read the texts in your own components with useMessages() (client) or <Message pick="spinner.label" /> (server). See Server Components and SSR.

Every message keyCopy Anchor Link

This is the Messages interface from packages/react/src/messages.tsx, with the bundled en and ptBR values. Function keys show the result of a sample call.

Dates and timesCopy Anchor Link

MessagesProvider doesn't touch dates. The date components (Calendar, RangeCalendar, DatePicker, DateRangePicker, DateField, TimeField) take a locale prop that sets the segment order, the month and weekday names, the first day of the week and the clock. The same date in three locales:

Without locale, they use the nearest I18nProvider (re-exported by Camaleo), then the browser's language. Set it on the server, so the server and the browser format the same way:

import { I18nProvider, MessagesProvider } from "@camaleo/react";

<MessagesProvider locale="pt-BR">
  <I18nProvider locale="pt-BR">{children}</I18nProvider>
</MessagesProvider>

Right to leftCopy Anchor Link

The skins and the component CSS are written with logical properties (margin-inline-start, inset-inline-end, border-start-start-radius…), so the same CSS works in both directions. To turn a page or a section right to left, do three things together:

1. dir="rtl" on the element, for the browser's layout.
2. lang on the same element, so screen readers pick the right voice.
3. <DirectionProvider direction="rtl"> around it, so the components flip their keyboard (arrows in tabs, sliders, menus) and their popups.

Switch the direction below, then pick other skins in the "preview in" bar: tabs, slider, switch and buttons all mirror, in every skin.

import { DirectionProvider } from "@camaleo/react";

const dir = lang === "ar" ? "rtl" : "ltr";

<html lang={lang} dir={dir}>
  <body>
    <DirectionProvider direction={dir}>{children}</DirectionProvider>
  </body>
</html>

Popups opened inside an RTL section stay RTL: the portal wrapper copies the direction. Your own icons that mean "forward" or "back" (arrows, chevrons) need flipping in RTL; icons that show a thing (a bell, a trash can) don't.