Localized Input

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

install	yarn add @clayui/localized-input
version
use	`import LocalizedInput from '@clayui/localized-input';`

Table of Contents

Localized URL
API Reference

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 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 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

Table of Contents

Localized URL
API Reference