IntroducingReact-intl hooks - A small and fast library to do i18n in React.

Since 2018, Many of the websites I work on have the need to have multiple languages as a feature. So I need a node package to help me make the site multi-language. Here are some of the multi-language websites I have made.

China Fashion Gala: https://cfg.bctc.io/

Future Sphere Academy: https://academy.thefuturesphere.com/

Why not use a popular node package, such as formatjs? At that time I was writing websites with the latest React features, such as Function Component and Hook. But the big node packages like formatjs didn't support function components and hooks at the time, and this was a big problem for me because I couldn't rewrite the site as a Class Component because of this. So I used this small, fast, and, at the time, one of the few multi-language packages that supported hooks.

Installation

Yarn：

yarn add react-intl-hooks

NPM：

npm install react-intl-hooks

Quickstart

First, import IntlProvider component:

import { IntlProvider } from 'react-intl-hooks';

Then, import language files:

import locale_en from './translations/en.json';
import locale_zh from './translations/zh.json';

These two json files store the text that we need to translate. You can add more than two languages.

en.json:

{
  "app.init": "Hello World"
}

zh.json:

{
  "app.init": "你好 世界"
}

Next, we need to get the language used by the browser to set the default language.

const language = navigator.language.split(/[-_]/)[0];

The complete code is as follows：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { IntlProvider } from 'react-intl-hooks';
import locale_en from './translations/en.json';
import locale_es from './translations/zh.json';
const data = {
  zh: locale_zh,
  en: locale_en,
};
const language = navigator.language.split(/[-_]/)[0];
ReactDOM.render(
  <React.StrictMode>
    <IntlProvider
      locale={language}
      messages={data[language]}
      defaultLocale={language}
    >
      <App />
    </IntlProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Translating your app

Here comes the magic part, we only need to import a hook to complete the translation.

import { useFormatMessage } from 'react-intl-hooks';

And inside of the function:

const t = useFormatMessage();

Complete code：

import React from 'react';
import { useFormatMessage } from 'react-intl-hooks';
function App() {
  const t = useFormatMessage();
  return (
    <div>
      <header>
        <a
          href="https://reactjs.org"
          target="_blank"
        >
          {t({ id: 'app.init', defaultMessage: 'Hello World' })}
        </a>
      </header>
    </div>
  );
}
export default App;

Please note: defaultMessage is required. This is used for compatibility with older versions of browsers, such as Internet Explorer.

Conclusion： useFormatMessage is not the only hook available. There are also many hooks available for different uses, such as those that display the time：useFormatDate and useFormatTime.

For a multi-language basic Javascript site that doesn't use react I have an article to recommend. It uses Jquery.(https://lokalise.com/blog/localizing-apps-jquery/)