react-multiplelanguage

react-multiplelanguage allows you to easily implement localization in React.

Localize your application right away getting started

Install

npm install react-multiplelanguage

// or

yarn add react-multiplelanguage

APIs and Components

LanguageContext

Makes your texts accessible throughout the application. You must wrap your entire app with this element and give a texts object.

<LanguageContext texts={myTexts}>
    <App />
</LanguageContext>

const myTexts= {
  US: {
      home: "Home",
      about: "About",

    },
  TR: {
      home: "Ana Sayfa",
      about: "Hakkımızda",
    }

Name	Type	Required	Default	Description
values	Object || JSON	true	null	It takes a object that contains different languages texts.
primary	Number	false	0	Indicating the index of the text element to be selected as the primary language.
useSessionStorage	Boolean	false	true	Uses session storage to store current language.

Flags

The Flags component is a customizable language selector component that allows users to switch between avaiable languages.

<Flags />

Name	Type	Required	Default	Description
size	String	false	md	This property affects the visual appearance and dimensions of the component. "sm","md","lg"
color	String	false	#555555	Sets the text color of the component.
backgroundColor	String	false	#ebebeb	Sets the background color of the component.

useLanguage

You can access the LanguageContext values by using this hook. It provides:

texts: It represents the texts object that contains the localized strings for different languages.

const { texts } = useLanguage();
console.log(texts); // if current language is EN then it will return the EN texts object. { home: { title: "Welcome to My Website", description: ...},

language: It is a variable that holds the currently selected language. It represents the language code (e.g., 'EN' for English, 'FR' for French) that is being used for localization. This value determines which localized strings from the texts object will be displayed.

const { language } = useLanguage();
console.log(language); // if current language EN then it returns "EN"

changeLanguage: It is a function that allows you to change the current language. When called with a language code as an argument, it updates the language value to the specified language, triggering a re-render of the component with the new language.

const { changeLanguage } = useLanguage();
changeLanguage('TR'); // sets the language TR

flags: It is a variable that holds an array of flag objects. This flags element is determined based on the language codes provided in your texts within the LanguageContext. It returns an array consisting of objects.

[
    { code: 'US', emoji: '🇺🇸' },
    { code: 'TR', emoji: '🇹🇷' }
];

getFlags: It also provides flags, but the order is always such that the current language is the first item.

const avaiableFlags = getFlags();
console.log(avaiableFlags); // [ {code: 'TR', emoji: '🇹🇷'}, {code: 'US', emoji: '🇺🇸'} ]

Countries

This file contains country flag emojis and codes. If your language code and emoji are not included in this file, please feel free to create an issue to request their addition.

 const codeAndEmojiArray = [
    {
        code: 'AD',
        emoji: '🇦🇩'
    },
    {
        code: 'AE',
        emoji: '🇦🇪'
    },
    {
        code: 'AF',
        emoji: '🇦🇫'
    },
...]