Strings and translation

The few words the components write themselves come from the provider, so you translate them with the rest of your app.

No English inside the components

A component writes text of its own only where a screen reader needs a name the design does not show: the × that closes a dialog, the pagination links, the sidebar's toggle. That text comes from BooleanUIProvider, never from the component. The provider has an English default for every key; pass your translations to replace them:

import { BooleanUIProvider } from "@booleanpress/ui/provider"

const strings = {
  close: t("Close"),
  previousPage: t("Go to previous page"),
  nextPage: t("Go to next page"),
}

<BooleanUIProvider strings={strings}>
  <App />
</BooleanUIProvider>

A key you leave out keeps its English default, so you can translate a few at a time. In a WordPress plugin, build the map with your plugin's own translation function, so the strings land in your text domain and your translators see them.

The keys

Key	English default	Used by
`close`	Close	Dialog and Sheet: the × button
`previous`	Previous	Pagination: the visible label
`next`	Next	Pagination: the visible label
`previousPage`	Go to previous page	Pagination: the link's name
`nextPage`	Go to next page	Pagination: the link's name
`morePages`	More pages	Pagination: the ellipsis
`pagination`	Pagination	Pagination: the landmark's name
`breadcrumb`	Breadcrumb	Breadcrumb: the landmark's name
`more`	More	Breadcrumb: the ellipsis
`loading`	Loading	Spinner
`toggleSidebar`	Toggle Sidebar	Sidebar: the trigger and the rail
`sidebarTitle`	Sidebar	Sidebar: the title of the phone-width panel
`sidebarDescription`	Displays the mobile sidebar.	Sidebar: the description of that panel
`commandTitle`	Command Palette	Command dialog: its title and the name of its search field
`commandDescription`	Search for a command to run...	Command dialog: its description
`suggestions`	Suggestions	Command: the list's name
`showPassword`	Show password	Password input: the button that shows the value
`notifications`	Notifications	Toast: the region's name
`closeNotification`	Close notification	Toast: the close button

Each component page lists the keys it reads under API. A new key always arrives with an English default, in a minor version, so an update never leaves a name empty.

Test with the pseudo-locale

A pseudo-locale replaces every letter with an accented one and brackets the result: Close becomes [Ćĺóšé]. Text that stays plain English was not translated; text that is cut off or overlaps needs more room, as German or Finnish will. Try it on this site with ⚙ → Strings → Pseudo-locale.

Dates and numbers

The calendar is built on React DayPicker, whose month names, day names and button labels come from its own locales rather than from the provider:

import { fr } from "react-day-picker/locale"

<Calendar locale={fr} />

Format numbers and dates in your own text with Intl.NumberFormat and Intl.DateTimeFormat for the reader's locale.