Localized Input

View in Lexicon

A text input variation used in fields that can be translated into multiple languages.

installyarn add @clayui/localized-input
versionNPM Version
useimport LocalizedInput from '@clayui/localized-input';

Table of Contents

Use it when you want to enable the users to define values like post titles, headings in multiple languages not having to rely on automatic translations.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LocalizedInput from '@clayui/localized-input';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const locales = [
		{
			label: 'en-US',
			symbol: 'en-us',
		},
		{
			label: 'es-ES',
			symbol: 'es-es',
		},
		{
			label: 'fr-FR',
			symbol: 'fr-fr',
		},
		{
			label: 'hr-HR',
			symbol: 'hr-hr',
		},
	];

	const [selectedLocale, setSelectedLocale] = useState(locales[0]);
	const [translations, setTranslations] = useState({
		'en-US': 'Apple',
		'es-ES': 'Manzana',
	});

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LocalizedInput
					id="locale1"
					locales={locales}
					onSelectedLocaleChange={setSelectedLocale}
					onTranslationsChange={setTranslations}
					selectedLocale={selectedLocale}
					translations={translations}
				/>
			</div>
		</Provider>
	);
}

Localized URL

You might want to allow your users to localize URLs, in that case here’s an example of how to compose Localized Input to get the desired result. The main parts are the prependContent and resultFormatter props.

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import LocalizedInput from '@clayui/localized-input';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const locales = [
		{
			label: 'en-US',
			symbol: 'en-us',
		},
		{
			label: 'es-ES',
			symbol: 'es-es',
		},
		{
			label: 'fr-FR',
			symbol: 'fr-fr',
		},
		{
			label: 'hr-HR',
			symbol: 'hr-hr',
		},
	];

	const [selectedLocale, setSelectedLocale] = useState(locales[0]);
	const [translations, setTranslations] = useState({
		'en-US': 'Apple',
		'es-ES': 'Manzana',
	});

	const prepend = '/home/';

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<LocalizedInput
					id="locale2"
					label="As a URL"
					locales={locales}
					onSelectedLocaleChange={setSelectedLocale}
					onTranslationsChange={setTranslations}
					prependContent={prepend}
					resultFormatter={(value) =>
						'https://liferay.com' + prepend + value
					}
					selectedLocale={selectedLocale}
					translations={translations}
				/>
			</div>
		</Provider>
	);
}

API Reference

LocalizedInput

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>
Parameters
Properties

ariaLabels

{ default: string; openLocalizations: string; translated: string; untranslated: string; } | undefined

Labels for the aria attributes

helpText

React.ReactText | undefined

Add informational text at the top of Localized Input.

label

React.ReactText | undefined

Label of the input

prependContent

React.ReactText | undefined

Content to be prepended in case you want to localize a URL.

locales *

Array<IItem>

List of locales to allow localization for

onSelectedLocaleChange *

(val: IItem) => void

Callback that gets called when a selected locale gets changed

val *

IItem

label *

string

symbol *

string

onTranslationsChange *

(val: ITranslations) => void

Callback that gets called when a translation of the selected locale gets changed

val *

ITranslations

[key: string]: string;

resultFormatter

((val: string) => React.ReactNode) | undefined

Allows specifying custom formatter, for example for formatting URLs, to be output after translating

selectedLocale *

IItem

Exposes the currently selected locale

label *

string

symbol *

string

spritemap

string | undefined

Path to the location of the spritemap resource.

translations *

ITranslations

Translations provided to the component to be used and modified by it

[key: string]: string;
Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko

Last edited January 29, 2025 at 1:35:02 AM

Table of Contents