Translate or reword the text components write, with LabelsProvider.
Components write some text of their own: button names such as "Next page", what screen readers announce, validation messages, placeholders and status words. It is English by default, and every piece of it can be replaced, to translate the library or just to reword one place. There are two ways to do it, and they combine.
Every component with built-in text takes a labels prop. Pass only the keys you want to change; the rest keep their English text.
1import { Pagination } from "xiod-ui/pagination";23export function ResultsPager() {4 return (5 <Pagination labels={{ previous: "Back", next: "Forward" }}>6 {/* … */}7 </Pagination>8 );9}The keys a component accepts are listed under labels in the API Reference on its page.
To translate the whole app, wrap it in LabelsProvider from xiod-ui/labels-provider. Labels are grouped by component, and any group or key you leave out keeps its English default.
1"use client";23import { LabelsProvider } from "xiod-ui/labels-provider";45export function Providers({ children }: { children: React.ReactNode }) {6 return (7 <LabelsProvider8 labels={{9 pagination: { previous: "Précédent", next: "Suivant" },10 dialog: { close: "Fermer" },11 carousel: {12 slideOf: (index, total) => `Diapositive ${index} sur ${total}`,13 },14 }}15 >16 {children}17 </LabelsProvider>18 );19}Text that includes a number, such as a slide's position or a file size limit, is a function that receives the number, so each language can put it where its grammar wants it.
Providers nest. An inner one is merged over the outer one key by key, so a section of the app can change one string without restating the rest.
labels prop on the component.LabelsProvider, merged over any outer ones.The groups LabelsProvider accepts, each named after the component it covers:
| Group | Component |
|---|---|
agentSteps | Agent Steps |
autocomplete | Autocomplete |
breadcrumb | Breadcrumb |
calendar | Calendar |
carousel | Carousel |
circularProgress | Circular Progress |
colorPicker | Color Picker |
combobox | Combobox |
dashboardGrid | Dashboard Grid |
datePicker | Date Picker |
dialog, drawer, toast | The close buttons of Dialog, Drawer and Toast |
dotMatrix | Dot Matrix |
draggable | Draggable |
fileUpload | File Upload |
gauge | Gauge |
inputPayment | Input Payment |
inputPhone | Input Phone |
inputSensitive | Input Sensitive |
morphicToast | Morphic Toast |
orb | Orb |
pagination | Pagination |
resizable | Resizable |
rulerPicker | Ruler Picker |
sidebar | Sidebar |
sortable | Sortable |
timeline | Timeline |
waveform | Waveform |
wheelPicker | Wheel Picker |
The full English text is exported as defaultLabels, typed as Labels, which is a handy starting point for a translation file.
A component of your own can use the same text. useLabels(group, overrides) returns the text in effect for a group: the English defaults, then any LabelsProvider replacements, then overrides, which is where a labels prop of your own goes.
1"use client";23import { type CarouselLabels, useLabels } from "xiod-ui/labels-provider";45export function SlideCounter({6 index,7 total,8 labels,9}: {10 index: number;11 total: number;12 labels?: Partial<CarouselLabels>;13}) {14 const text = useLabels("carousel", labels);15 return <p aria-live="polite">{text.slideOf(index, total)}</p>;16}