Material UI react language picker
npm install mui-language-picker --saveimport {
LanguagePicker,
ILanguagePickerStrings,
languagePickerStrings_en,
} from "mui-language-picker";
const MyComponent = (props: any) => {
const [bcp47, setBcp47] = React.useState("und");
const [lgName, setLgName] = React.useState("");
const [fontName, setFontName] = React.useState("");
return (
<LanguagePicker
value={bcp47}
setCode={setBcp47}
name={lgName}
setName={setLgName}
font={fontName}
setFont={setFontName}
t={languagePickerStrings_en}
/>
);
};Output should be a Language Picker when entered opens a dialog| Parameter | Type | Meaning |
|---|---|---|
| value | string | BCP 47 language code |
| setCode* | (value: string) => void | callback to change BCP 47 value |
| name | string | language name |
| setName* | (name: string) => void | callback to change language name |
| font | string | font family name |
| setFont* | (font: string) => void | callback to change font family name |
| disabled* | boolean | true if control disabled |
| t | ILanguagePickerStrings | localization strings (see below) |
* parameters marked with an asterisk are optional
export const languagePickerStrings_en = {
font: "Font",
script: "Script",
language: "Language",
selectLanguage: "Choose Language Details",
findALanguage: "Find a language by name, code, or country",
codeExplained: "Code Explained",
subtags: "Subtags",
details: "Details",
languageOf: "A Language of $1$2.",
inScript: " in the $1 script",
select: "Save",
cancel: "Cancel",
} as ILanguagePickerStrings;npm install
npm run buildnpm run clean
npm run index
npm test