2.0.11 • Published 5 months ago

@ttoss/react-i18n v2.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

@ttoss/react-i18n

@ttoss/react-i18n is a library that provides a way to internationalize your React application using ttoss ecosystem.

:::note You should declare your messages as describe in the FormatJS documentation. :::

Get Started

Install @ttoss/react-i18n

pnpm add @ttoss/react-i18n
pnpm add -D @ttoss/i18n-cli

To extract and compile your translations, check the ttoss/i18n-cli documentation.

Examples of use

index.tsx

Import the I18nProvider and wrap your application with it. Add to it a function called loadLocaleData to load all the translation data.

import { I18nProvider, LoadLocaleData } from '@ttoss/react-i18n';

const loadLocaleData: LoadLocaleData = async (locale) => {
  switch (locale) {
    case 'pt-BR':
      return import('../i18n/compiled/pt-BR.json');
    default:
      return import('../i18n/compiled/en.json');
  }
};

ReactDOM.render(
  <I18nProvider
    locale={window.navigator.language}
    loadLocaleData={loadLocaleData}
  >
    <App />
  </I18nProvider>,
  document.getElementById('root')
);

App.tsx

Then import the useI18n hook and extract the intl, to get access to the formatMessage function and many others (using defineMessages is optional).

import { useI18n, defineMessages } from '@ttoss/react-i18n';

const messages = defineMessages({
  myNameIs: {
    description: 'My name is',
    defaultValue: 'My name is {name}',
  },
});

const App = () => {
  const { intl, setLocale } = useI18n();

  const [name, setName] = React.useState('Rayza');

  return (
    <div>
      <div>
        <button onClick={() => setLocale('en-US')}>en-US</button>

        <button onClick={() => setLocale('pt-BR')}>pt-BR</button>
      </div>

      <input value={name} onChange={(e) => setName(e.target.value)} />

      <h3>{intl.formatMessage(messages.myNameIs, { name })}</h3>
    </div>
  );
};

export default App;

Configuring Vite

In order to inject the i18n id's properly on the code, configure the plugins section of vite.config.ts according to this:

import { babelConfig } from '@ttoss/config';

export default defineConfig(async () => {
  return {
    // ...

    plugins: [
      react({
        babel: {
          plugins: babelConfig().plugins,
        },
      }),
    ],
  };

  // ...
});
2.0.11

5 months ago

2.0.10

6 months ago

2.0.7

7 months ago

2.0.9

7 months ago

2.0.8

7 months ago

2.0.6

8 months ago

2.0.5

8 months ago

2.0.3

10 months ago

2.0.2

10 months ago

2.0.4

10 months ago

1.26.15

11 months ago

2.0.1

11 months ago

2.0.0

11 months ago

1.26.14

12 months ago

1.26.13

12 months ago

1.26.11

1 year ago

1.26.10

1 year ago

1.26.12

1 year ago

1.26.9

1 year ago

1.26.8

1 year ago

1.26.7

1 year ago

1.26.6

1 year ago

1.26.5

1 year ago

1.26.4

1 year ago

1.26.3

1 year ago

1.26.2

1 year ago

1.26.1

1 year ago

1.26.0

2 years ago

1.25.8

2 years ago

1.25.7

2 years ago

1.25.6

2 years ago

1.25.4

2 years ago

1.25.5

2 years ago

1.25.3

2 years ago

1.25.0

2 years ago

1.25.1

2 years ago

1.24.0

2 years ago

1.23.6

2 years ago

1.25.2

2 years ago

1.23.2

2 years ago

1.23.4

2 years ago

1.23.5

2 years ago

1.22.0

2 years ago

1.23.0

2 years ago

1.22.1

2 years ago

1.23.1

2 years ago

1.19.8

2 years ago

1.19.7

2 years ago

1.19.9

2 years ago

1.21.0

2 years ago

1.20.0

2 years ago

1.19.0

2 years ago

1.19.4

2 years ago

1.19.3

2 years ago

1.19.2

2 years ago

1.18.10

2 years ago

1.19.1

2 years ago

1.18.9

2 years ago

1.19.6

2 years ago

1.19.5

2 years ago

1.18.8

2 years ago

1.18.7

2 years ago

1.18.6

2 years ago

1.18.5

3 years ago

1.18.4

3 years ago

1.18.3

3 years ago

1.18.2

3 years ago

1.18.1

3 years ago

1.18.0

3 years ago

1.17.2

3 years ago

1.17.1

3 years ago

1.17.0

3 years ago