Socket
Socket
Sign inDemoInstall

react-i18next

Package Overview
Dependencies
8
Maintainers
2
Versions
303
Alerts
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.

    14.0.5latest
    GitHub
    npm

Version published
Maintainers
2
Weekly downloads
3,290,902
increased by0.98%

Weekly downloads

Package description

What is react-i18next?

The react-i18next package is a powerful internationalization framework for React / React Native which is based on i18next. It provides a way to translate your application into multiple languages, handle plurals and formatting, and manage translations.

What are react-i18next's main functionalities?

Translation

This feature allows you to translate text in your React components using the `t` function provided by the `useTranslation` hook.

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  return <p>{t('keyForTranslation')}</p>;
}

Language Switching

This feature enables you to switch languages on the fly within your application by calling the `changeLanguage` method.

import { useTranslation } from 'react-i18next';

function ChangeLanguageButton() {
  const { i18n } = useTranslation();
  return (
    <button onClick={() => i18n.changeLanguage('de')}>Change to German</button>
  );
}

Pluralization

This feature allows you to handle plural forms in translations depending on the count provided.

import { useTranslation } from 'react-i18next';

function MyComponent({ count }) {
  const { t } = useTranslation();
  return <p>{t('keyForPlural', { count })}</p>;
}

Formatting

This feature allows you to format dates, numbers, and other values within your translations.

import { useTranslation } from 'react-i18next';

function MyComponent({ date, number }) {
  const { t } = useTranslation();
  return (
    <div>
      <p>{t('formattedDate', { date })}</p>
      <p>{t('formattedNumber', { number })}</p>
    </div>
  );
}

Namespaces

This feature allows you to organize your translations into namespaces, making it easier to manage large translation files.

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation('namespace1');
  return <p>{t('namespace1:keyForTranslation')}</p>;
}

Other packages similar to react-i18next

Changelog

Source

14.0.5

  • Fix 1691 for strict mode, by preserving change language binding 1720

Readme

Source

react-i18next Tweet

Lint & Test Code Climate Coverage Status Quality npm

IMPORTANT:

Master Branch is the newest version using hooks (>= v10).

$ >=v10.0.0
npm i react-i18next

react-native: To use hooks within react-native, you must use react-native v0.59.0 or higher

For the legacy version please use the v9.x.x Branch

$ v9.0.10 (legacy)
npm i react-i18next@legacy

Documentation

The documentation is published on react.i18next.com and PR changes can be supplied here.

The general i18next documentation is published on www.i18next.com and PR changes can be supplied here.

What will my code look like?

Before: Your react code would have looked something like:

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...

After: With the trans component just change it to:

...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...

Head over to the interactive playground at codesandbox.

📖 What others say

Why i18next?

  • Simplicity: no need to change your webpack configuration or add additional babel transpilers, just use create-react-app and go.
  • Production ready we know there are more needs for production than just doing i18n on the clientside, so we offer wider support on serverside too (nodejs, php, ruby, .net, ...). Learn once - translate everywhere.
  • Beyond i18n comes with locize bridging the gap between development and translations - covering the whole translation process.

ecosystem

Localization workflow

Want to learn more about how seamless your internationalization and translation process can be?

video

watch the video

Installation

Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install react-i18next
  • If you don't use a module loader it will be added to window.reactI18next

Do you like to read a more complete step by step tutorial?

Here you'll find a simple tutorial on how to best use react-i18next. Some basics of i18next and some cool possibilities on how to optimize your localization workflow.

Examples

v9 samples

Requirements

  • react >= 16.8.0
  • react-dom >= 16.8.0
  • react-native >= 0.59.0
  • i18next >= 10.0.0 (typescript users: >=17.0.9)
v9

Core Contributors

Thanks goes to these wonderful people (emoji key):


Jan Mühlemann

💻 💡 👀 📖 💬

Adriano Raiano

💻 💡 👀 📖 💬

Pedro Durek

💻 💡 👀 💬

Tiger Abrodi

💻 👀

This project follows the all-contributors specification. Contributions of any kind are welcome!


Gold Sponsors


localization as a service - locize.com

Needing a translation management? Want to edit your translations with an InContext Editor? Use the original provided to you by the maintainers of i18next!

locize

By using locize you directly support the future of i18next and react-i18next.


Keywords

FAQs

Last updated on 06 Feb 2024

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc