Installation and how it works

To begin, you must create a config file containing the language packs you wish to support. They must be defined as follows:

const config = {
  languages: {
    en: {
      index: 'value in english'
    },
    fr: {
      index: 'value in french'
    }
    // ...
  }
  // optional arguments
};

We will talk more about the optional arguments that can be passed here in the reference guide.

Next, you will have to add the language provider somewhere at the top of your component tree. The provider takes a prop named config, which is generated by the function createLanguageConfig with the parameter the previously defined config.

import { LanguageProvider, createLanguageConfig } from 'react-language-support';

const App = () => (
  <LanguageProvider config={createLanguageConfig(config)}>
    {/* The rest of your app goes here */}
  </LanguageProvider>
);

This was all the config needed for the library to run correctly. Now you may use it by importing the Lang component and passing the index value as a prop.

import { Lang } from 'react-language-support';

const MyComponent = () => <Lang>index</Lang>;

If all was set up correctly, you should have that value replaced with 'value in english'.

But how does it know which language to use? In the back, the library uses the default language as the first language in the object unless specified otherwise. It then uses and save in the local storage that value. When modified manually, the local storage is updated with the preferred value.

To change the current language you need to use the language context and then call the change the changeCurrentLanguage function with the name of the language.

import { useContext } from 'react';
import { LanguageContext } from 'react-language-support';

const MyComponent = () => {
  const context = useContext(LanguageContext);

  return (
    <>
      <button onClick={() => context.changeCurrentLanguage('fr')}>
        Change language to fr
      </button>
      <button onClick={() => context.changeCurrentLanguage('en')}>
        Change language to en
      </button>
      <br />
    </>
  );
};

After that, you should observe how the language switches, and the change is persistent even after refreshing the page.

Another important feature are replacements, which are basically variables in the text. To use them, you must wrap the variable name in double braces, without space in between, like this {{var}}.

en: {
  index: 'Hello {{name}}!'
}

You can then tell the Lang component to replace the values using the replace prop. The key name has to match with the replace in the text and it is case sensitive.

<Lang replace={{name: 'John Doe'}}>index</Lang>

You should see that the name has been replaced with 'John Doe' in the final text.