web-dev-qa-db-fra.com

react-intl vs react-i18next pour l'internationalisation de ReactJS (i18n)

J'ai besoin de créer une application multilingue à l'aide de ReactJS. L'application nécessite un dictionnaire personnalisé pour différentes langues ainsi qu'un formatage automatique de la date/heure, des chiffres et de la devise.

De tout ce que j'ai vu, il y a 2 bibliothèques très populaires:

reac-intl et react-i18next

Quels seraient les avantages entre les uns et les autres? Quel est le plus populaire et le plus populaire?

Quel est le choix général pour une application ReactJS prenant en charge plusieurs langues?

javascriptreactjsinternationalizationreact-intlreact-i18next
17
Mendes

La réponse de @ whyp ne prend pas en compte react-i18next fait partie de i18next qui compte 2100 étoiles supplémentaires (sans avoir une énorme entreprise à l'arrière).

react-intl peut être assez déroutant (opinion personnelle). i18next est bien sûr plus simple à intégrer et offre plus de fonctionnalités (chargement des ressources, détection de la langue de l'utilisateur)

i18next n’est pas seulement réactif - apprenez en une fois, utilisez-le partout ( https://www.i18next.com/supported-frameworks.html )

i18next a une couche supplémentaire en tant que couche de service: http://locize.com/ / résolution du processus de localisation en plus de l'internationalisation (i18n)

18
jamuhl

js-lingui

Je voudrais présenter une bibliothèque i18n alternative que je développe.

  • fonctionne à la fois avec Vanilla JS (lingui-i18n) et React (lingui-react)
  • lingui-react est la seule bibliothèque qui supporte pleinement les composants intégrés et le formatage riche (voir ci-dessous)
  • construire au dessus de ICU MessageFormat
  • inclut également CLI (lingui-cli) pour la construction de catalogues de messages
  • il utilise des types de flux et beaucoup de validation pendant la compilation pour détecter les erreurs évidentes dans MessageFormat

Syntaxe

ICU MessageFormat est très flexible car il supporte les variables, les pluriels, les ordinaux, les choix, le formatage de nombre/date et est également extensible. Cependant, les messages complexes sont un peu difficiles à écrire.

lingui-i18n fournit une syntaxe pratique en utilisant les littéraux de modèles balisés ES6, tandis que lingui-react fournit une syntaxe similaire en utilisant React Components

Vanilla JS

import { i18n } from 'lingui-i18n'

i18n.t`Hello World`
i18n.t`Hello, my name is ${name}`
i18n.plural({ value: count, one: "# book", other: "# books" })

Autres exemples dans lingui-i18n docs

Réagir

import React from 'react'
import { Trans, Plural } from 'lingui-react'

class App extends React.Component {
  render() {
    const name = "Fred"
    const count = 42

    return (
      <div>
      // Static text
      <Trans>January</Trans>

      // Variables
      <Trans>Hello, my name is {name}</Trans>

      // Components
      <Trans>See the <a href="/more">description</a> below.</Trans>

      // Plurals
      <Plural 
        value={count} 
        zero={<strong>No books</strong>}
        one="# book" 
        other="# books" 
      />
      </div>
    )
  }
}

docs font partie de js-lingui main docs.

Composants en ligne et mise en forme enrichie

J'ai commencé à écrire cette bibliothèque parce que je voulais a) une syntaxe plus simple et b) une prise en charge complète des composants en ligne.

react-intl et react-i18next ont tous deux une prise en charge très limitée du texte enrichi et des composants en ligne. Vous pouvez utiliser des balises HTML de base dans les composants (This is <strong>bold</strong> text.) ou injecter des composants sous forme de variables (This is {el} text. où el = <strong>bold</strong>).

Le problème avec la première approche est que vous ne pouvez pas utiliser de composants React personnalisés. Le problème avec la 2ème approche est que le traducteur travaille avec 2 messages au lieu d'un (This is {el} text. et bold). C’est en fait assez grave car il faut traduire toute la phrase pour conserver le contexte.

Avec lingui-react, vous pouvez utiliser les composants any React dans les traductions et le message est extrait en un seul morceau:

<Trans>See the <Link to="/more">description</Link> below.</Trans>
// for translator: See the <0>description</0> below.

Un autre avantage de cette solution est que le nom du composant et les accessoires sont masqués dans le message extrait. Je me souviens que nous avons passé beaucoup de temps à mettre à jour les traductions après avoir modifié class sur l’élément interne.

Il suffit de le comparer avec une interpolation dans react-i18next ou react-intl .

Exigences

lingui-i18n et lingui-react nécessitent tous deux des préréglages pour que tout fonctionne correctement. C'est un problème si vous souhaitez l'utiliser avec l'application Créer une application, car vous devez soit éjecter, soit insérer un react-scripts.

16
Tomáš Ehrlich

Le choix général est react-intl, qui est beaucoup plus populaire que react-i18next. Il a actuellement 4,5k vs les 300 étoiles de react-i18next sur github . C'est la solution idéale pour la localisation dans React.

Voici un tutoriel pour commencer: https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

9
whyp

Essayez https://github.com/alibaba/react-intl-universal développé par Alibaba Group . Yahoo/react-intl ne peut être appliqué que dans la couche de visualisation telle que React.Component. Pour le fichier Vanilla JS, il n’ya aucun moyen de l’internationaliser. Par exemple, le fragment de code suivant est un validateur de formulaire général utilisé par de nombreux utilisateurs de React.Component dans nos applications.

export default const rules = {
  noSpace(value) {
    if (value.includes(' ')) {
      return 'Space is not allowed.';
    }
  }
};

alibaba/react-intl-universal est simple mais puissant. Cela ne change pas le comportement des composants. Et peut être utilisé dans les fichiers JSX et JS normal.

1
cwtuan