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",
    }

Flags

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

<Flags />

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: '🇦🇫'
    },
...]