A ReactJS input component that manages multiple languages

Feb 28, 2019
A ReactJS input component that manages multiple languages


A ReactJS input component that manages multiple languages.

View demo Download Source

$ npm install --save react-translatable-input



langReact.PropTypes.string.isRequiredThe current editing language-
valuesReact.PropTypes.object.isRequiredThe object containing the translated strings-
textareaReact.PropTypes.boolUse a textarea for a multi-line input?false
placeholderReact.PropTypes.stringThe placeholder to show when the input field is empty-
classesReact.PropTypes.stringAdditional HTML classes to pass to the component-
disabledReact.PropTypes.boolIs the component disabled?false
showLanguageNameReact.PropTypes.boolShow the language name label next to the flag?false
langTranslatorReact.PropTypes.funcUsed to translate iso langage codes to language names when showLanguageName is true-

The values object

The most important prop to be passed is the values object, which must be a plain JS Object in the form { langTag: langValue }. For example:

values = { 'it': 'Italian input', 'en-US': 'English (United States) input', 'en': 'English input', 'de': 'German input' };

All the language tags must be BCP 47 compliant. Differently encoded language names will be filtered out and not shown in the component.
The only exception to this rule is the default language, intended to be used as a general fallback language. If the default language is present, it will always be put on top of the available languages.


onLanguageChangeReact.PropTypes.funcfunction(selectedLanguage) {}Callback on language selection
onValueChangeReact.PropTypes.funcfunction(newValue, editingLanguage) {}Callback on text entered
onKeyDownReact.PropTypes.funcfunction(event) {}Callback on keydown when text input is focused

Build it yourself

Clone and run

$ npm install