TIP

i18n means Internationalization

Some of the components requires human-readable texts translated into multiple languages. For example, DatePicker has buttons such as "Apply", "Reset" and "Today" that should change their language depending on the application's one. By default, components support the following languages: de, en, es, fr, it, ja, ko, nl, pl, pt, sv, tr, vi, zh. Components with such translatable texts provides locale property that allows you to select locale of texts, and i18n property to override texts of existing locales or provide texts for non existing ones.

import React from 'react';
import { Box, Flex } from 'intergalactic/flex-box';
import Pagination from 'intergalactic/pagination';

const Demo = () => {
  return (
    <Flex>
      <Box>
        <Pagination
          locale='nld'
          i18n={{
            nld: {
              prevPageLabel: 'Vorige',
              prevPageDescription: 'Vorige pagina {pageNumber}',
              nextPageLabel: 'Volgende',
              nextPageDescription: 'Volgende pagina {pageNumber}',
              pageInputLabel: 'Pagina:',
              totalPagesLabel: 'van',
              paginering: 'Paginering',
              firstPage: 'Eerste pagina',
              currentPage: 'Huidige pagina',
              confirm: 'Bevestig paginanummer',
              lastPage: 'Laatste pagina #{lastPageNumber}',
              goToPage: 'Pagina {pageNumber}',
            },
          }}
          totalPages={123}
        />
      </Box>
    </Flex>
  );
};

export default Demo;

I18nProvider

To set default locale for all components of the application, or it's part, you can use I18nProvider component.

import React from from 'react';
import ReactDOM from from 'react-dom';
import { App } from 'App';
import { I18nProvider } from '@semcore/utils/lib/enhances/WithI18n';

ReactDOM.render(
  <I18nProvider value="es">
    <App />
  </I18nProvider>,
  document.querySelector('#root')
);

Locale bundle extracting

By default, all translations are included into main chunk. You can configure your bundler with our plugin to put most needed translations into main chunk, less needed into separated chunks and don’t include never needed translations.

Plugins are provided in form of unplugin for most popular bundling systems: Vite, Rollup, Webpack and esbuild.

TIP

Note: These plugins affect only Intergalactic components translations and cannot be used for localization of your application.

To use it, install intergalactic and import corresponding plugin from intergalactic/i18n-unplugin.

Plugins have three optional configuration properties:

1. bundleLocales – list of locales translations that should be included into main chunk. All other locales translations will go into their owns.
2. includeLocales – list of default locales that will be included into bundled chunks. All other default locales will be ignored.
3. excludeLocales – list of default locales that will be ignored and not included into bundled chunks.

Usage with Vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { intergalacticI18nVitePlugin } from 'intergalactic/i18n-unplugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    intergalacticI18nVitePlugin({
      bundleLocales: ['es'],
      includeLocales: ['en', 'es'],
    }),
  ],
});

Usage with Webpack

var { intergalacticI18nWebpackPlugin } = require('intergalactic/i18n-unplugin');

module.exports = {
  // ...
  plugins: [intergalacticI18nWebpackPlugin()],
  // ...
};

Usage with Rollup & esbuild

import { intergalacticI18nRollupPlugin, intergalacticI18nEsbuildPlugin } from 'intergalactic/i18n-unplugin';
// ...