
## Code-splitting for resources

Code-splitting is a built-in function in many code bundlers like [Webpack](https://webpack.js.org). It's used mostly to lazy load only required JavaScript code or other resources.
It helps in improving application performance by loading only required parts of the application, instead of fetching all resources at once.
This is a perfect solution for localization purposes to load translations for only one language instead of all of them to speed up your web application.

> Medium-sized web application with about 1000 unique translation keys can contain about 50kb translated messages for one language. If you would
> support 10 languages in your app, whole translation file could have size nearly 1 megabyte.

Learn more about [code-splitting in React](https://reactjs.org/docs/code-splitting.html).

## How to lazy load JSON file in React?

Here is the asynchronous function TypeScript, which accepts `languageKey` as a `string` and returns a loaded JSON file as an JavaScript object.

```typescript
const loadJson = (languageKey: string): Promise<any> => {
  return new Promise((res, rej) => {
    import(`../assets/i18n/${languageKey}-messages.json`).then((data) => {
      res(data?.default);
    });
  });
};
```

## How to use lazy load in React app?

Here is the full example code for lazy loading translations from local JSON files. The code is written in TypeScript,however, it should be easy to convert into plain JavaScript.

```typescript jsx
import {useState} from "react";

const [locale, setLocale] = useState('en-US');
const [messages, setMessages] = useState({});

// first useEffect
useEffect(() => {
  const locale = window.navigator.language;
  setLocale(locale);
}, []);

// second useEffect
useEffect(() => {
  loadJsonAsync = async () => {
    const messages = await loadJson(locale);
    setMessages(messages);
  }
  loadJsonAsync();
}, [locale])

// use your messages
```

React will invoke:
- the first `useEffect` hook only **once on every page re-render**. We are getting the language from web browser. Learn more about [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) object.

- the second `useEffect` hook when `locale` value is changed to lazy load different JSON file with translations.

> You cannot invoke async functions in `useEffect` React hook, that is why we create a new `loadJsonAsync` function.

Check example [how to load translations from backend](https://github.com/simplelocalize/react-intl-simplelocalize/blob/master/src/index.js) using a standard fetch API.


## Use loaded JSON messages with IntlProvider

To use loaded JSON messages with FormatJS, you can simply pass `locale` variable and `messages` object as props
to IntlProvider.

```tsx
<IntlProvider 
  locale={locale} 
  messages={messages}
>
          {children}
</IntlProvider>
```

`children` variable should contain your React component or even a whole application (e.g., `<App/>`) in which you want to provide translations.


How to use code splitting with JSON files in React application


The study shows that 72% of consumers are more likely to stay on a website if it has been translated! 
Moreover, 55% of consumers said they only buy from websites which are in their native language!

Internationalization of your project is critical for success, if you plan to go to market in a different country.

Full [list of localization libraries and tools on Github](https://github.com/jpomykala/awesome-i18n). You are welcome to [add your resources](https://github.com/jpomykala/awesome-i18n) as a pull requests or just [create a new issue](https://github.com/jpomykala/awesome-i18n/issues/new).

## Top React localization libraries

See my list of the best React libraries which I gathered. I focus mainly on ReactJS, React Native and Expo libraries.

### 1. [react-native-localize](https://github.com/zoontek/react-native-localize)

This library is a toolbox for your React Native app localization!

![Screenshot 2021-02-13 at 16.48.01](https://dev-to-uploads.s3.amazonaws.com/i/u9clovbbygyynepbpdnu.png)


### 2. [FormatJS](https://formatjs.io)

Internationalize your web apps with react-intl library (now FormatJS). Check also FormatJS CLI for message extraction below!

![formatjs library](https://dev-to-uploads.s3.amazonaws.com/i/vuixvedahnulx42ip99l.png)

#### See also
- [Integration guide: translations hosting](/docs/integrations/format-js/) - check how to use SimpleLocalize with FormatJS library
- [Extract i18n keys from FormatJS project](/docs/cli/i18n-keys-extraction/) - learn more about message extraction done by SimpleLocalize CLI
- [Blog post: FormatJS and React application localization](/blog/posts/formatjs-reactjs-internationalization/) - blog post about FormatJS translation management with SimpleLocalize 
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-react-intl) - example project code with configured FormatJS
- [Live demo](https://react-intl.simplelocalize.io) - see live demo of FormatJS (react-intl) and SimpleLocalize integration


### 3. [FormatJS CLI](https://formatjs.io/docs/tooling/cli/)

Extract messages from project with FormatJS library. Learn [how to upload extracted translation messages to SimpleLocalize](/docs/integrations/format-js-cli).

![formatjs cli](https://dev-to-uploads.s3.amazonaws.com/i/p3gu7b64mfg6bpa4s7md.png)


### 4. [react-i18nify](https://github.com/sealninja/react-i18nify)

'React-i18nify' is a simple group of translation and localization components and helpers for your React application.

![react-i18nify](https://dev-to-uploads.s3.amazonaws.com/i/5aboslv2dpx5z3pz444r.png)


### 5. [react-persian](https://github.com/evandhq/react-persian)

Are you developing a application for a persian audience? Check 'react-persian' library. This is a group of React components for Persian localization.

![react-persion](https://dev-to-uploads.s3.amazonaws.com/i/x7rs5zd63u3nutegejf1.png)


### 6. [react-littera](https://github.com/Assembless/react-littera)

Littera was created to make maintaining and managing translations easier. It allows placing translations right beside your component as well as storing translations globally. Littera's structure was inspired by react-jss.

![react littera for managing translations](/blog/react-littera.png)

```shell
npm install --save @assembless/react-littera
```

### 7. [react-i18next](https://react.i18next.com/)

One of the most React localization libraries. Commonly used in React localization. It can be used with React Web and React Native.
i18next was primary created for React only. The community gathered among the library created integrations for other frontend frameworks such as AngularJS, Vue.js and more.

#### See also
- [Integration guide: translations hosting](/docs/integrations/i18next/) - check how to use SimpleLocalize with i18next library
- [Extract i18n keys from i18next library](/docs/cli/i18n-keys-extraction/) - use SimpleLocalize CLI to find translation keys used in the project
- [Blog post: i18next in 3 steps](/blog/posts/i18next-reactjs-localization/) - blog post about integrating SimpleLocalize with i18next
- [Github repository: example project](https://github.com/simplelocalize/simplelocalize-i18next) - example project with configured i18next with **'http-backed'** and **'loadpath'**
- [Live demo](https://i18next.simplelocalize.io) - see live demo of i18next with configured http-backend and 'loadpath'. 

![react localization](/blog/i18next-simplelocalize.png)

### 8. [bloodyowl/react-translate](https://github.com/bloodyowl/react-translate)

React utilities for simple i18n handling. Library is a bit outdated, last commit was in 2019, and last release is dated to end of 2016. 
**If some reason you didn't like FormatJS, then the library is worth checking.**

![react-translate](https://dev-to-uploads.s3.amazonaws.com/i/0vleumn4cn3owrx85z4l.png)


### 9. [next-translate](https://github.com/vinissimus/next-translate)

Thanks to the community, finally we have an easy and simple i18n support for NextJS.
In the NextJS version 10, the developers realised how important is i18n for SEO. So, they decided to introduce internationalized routing!
We can read it on the blog that [internationalized routing is now available](https://nextjs.org/blog/next-10#internationalized-routing) in NextJS 10.


![next-translate](https://dev-to-uploads.s3.amazonaws.com/i/utqt31b1lfjqhee1sqjl.png)


### 10. [react-translated](https://github.com/amsul/react-translated)

A dead simple way to add complex translations in a React project

![react-translated](https://dev-to-uploads.s3.amazonaws.com/i/f7j04hewvzd5p7uqtutx.png)


### 11. [React-intl hooks](https://github.com/CreateThrive/react-intl-hooks)


React-intl-hooks is a small and fast library that you can use to replace FormatJS components.
It provides a `t` function, which works like the `t` function in i18next library.

```tsx
const t = useFormatMessage();
t({ id: 'learn-react', defaultMessage: 'Learn React' })
```

![react-intl hooks](https://dev-to-uploads.s3.amazonaws.com/i/0eo7vujvx4zab2fmu9xc.png)

```shell
npm install --save react-intl-hooks
```

### 13. [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n)

An opinionated, fully type-safe, lightweight localization library for TypeScript and JavaScript projects with no external dependencies.

![typesafe-i18n example demo](/blog/typesafe-i18n-demo.gif)

```shell
npm install --save typesafe-i18n
```


### 12. [SimpleLocalize](/register/)

SimpleLocalize allows you to upload and manage translation keys in the cloud. Free account allows you to host up to 
100 translation keys. You can [create your account here](/register/).

#### 1. Upload translations

![translations cli upload](https://dev-to-uploads.s3.amazonaws.com/i/t2ehjetlw3tkuifl7izi.gif)

#### 2. Translate in editor

![simplelocalize editor - change-translation](https://dev-to-uploads.s3.amazonaws.com/i/rxm1q0vgfm428x13eftz.gif)

You can use DeepL or Google Translate to translate texts automatically.

#### 3. Download translations

![simplelocalize cli download](https://dev-to-uploads.s3.amazonaws.com/i/irpa9scrovwlkni18slt.gif)

#### 4. Localization hosting

Check also [translation hosting](/docs/general/translation-hosting/) option to keep your localization files in the cloud.

![fetching translations from backend](/blog/localization-files-hosting.png)

Resources:
- [i18next: integration guide](/docs/integrations/i18next/)
- [FormatJS: integration guide](/docs/integrations/format-js/)
- [FormatJS CLI: integration guide](/docs/integrations/format-js-cli/)
- [Docs: translation hosting](/docs/general/translation-hosting/)
- [Docs: Getting started with CLI](/docs/cli/get-started/)

👋 Thanks for reading!


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Typescript

How to use code splitting with JSON files in React application

List of i18n libraries for React, React Native, and NextJS