<TranslationInput
value={title}
onValueChange={setTitle}
locale={locale}
locales={["fr-FR", "en-GB"]}
onLocaleChange={setLocale}
localeLabel="Langue"
localeCodes={{ "fr-FR": "FR", "en-GB": "EN" }}
/>Typing into a locale copies the text into every locale that is still empty, so a value written once is complete in all of them. Locales that already hold their own wording are never overwritten.
API
| Prop | Type | Default | |
|---|---|---|---|
locale | string | required | Locale whose string is currently being edited. |
localeLabel | string | required | Accessible name for the locale select. |
locales | readonly string[] | required | Locale tags offered by the select, in display order. |
onLocaleChange | (locale: string) => void | required | Receives the newly selected locale. |
onValueChange | (value: TranslationValue) => void | required | Receives the whole record with the active locale's string replaced. |
value | TranslationValue | required | The whole per-locale record; only the active locale's string is shown. |
className | string | — | Wrapper class (width/layout), forwarded to the InputGroup. |
localeCodes | Record<string, string> | — | Short display code per locale (e.g. { "fr-FR": "FR" }). Falls back to the tag. |
defaultValue | string | number | readonly string[] | — | The default value of the input. Use when uncontrolled. |
render | ComponentRenderFn<HTMLProps, InputState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: InputState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: translation-input/components/translation-input.tsx.