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

Overview

react-i18next Tweet

CircleCI Code Climate Coverage Status Quality dependencies devdependencies

IMPORTANT:

Master Branch is the new v10 using hooks.

$ 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

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 developement 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

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

💻 💡 📖 💬

Tiger Abrodi

💬 💻 👀

Pedro Durek

💻 💡

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

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


Comments
  • Future of the NextJs example

    Future of the NextJs example

    We can discuss the future of the NextJs example here, as it has gotten a lot of attention lately, and has some shortcomings.

    Current problems:

    1. Language subpaths are causing a lot of issues
    2. Initial language and the translation HOCs are not working well together

    Future goals:

    1. Refactor server and Link usage to match this example, thus preventing 404s and fixing #569
    2. Unify translation workflow, and make it less prone to user error: expose a single withNamespaces HOC that supports tree traversal, and make it abundantly clear that this is the only way to translate content. Fixes issues like #603.

    I believe the best way forward is a complete rewrite to simplify a few things. The first step is to decide if we want to support language subpaths at all.

    Are there any other issues people are aware of currently?

    I would like to compile a full list of current issues we are facing here, as well as any new features, or features we plan to remove, before proceeding with any work on the NextJs example.

    Only then can we have a clear plan and execute it.

    enhancement next.js / SSR 
    opened by isaachinman 67
  • I18nextWithTranslation suspended while rendering, but no fallback UI was specified

    I18nextWithTranslation suspended while rendering, but no fallback UI was specified

    I wrote it up on Stack Overflow before I figured out how to post here.

    https://stackoverflow.com/questions/54951422/error-i18nextwithtranslation-suspended-while-rendering-but-no-fallback-ui-was

    I am using v10 and only using the HOC withTranslation. It looks so simple, yet I am not able to get it working. I suspect there is something simple.

    can not reproduce 
    opened by margozzi 57
  • False warning about accessing t function before calling init

    False warning about accessing t function before calling init

    Describe the bug I'm having a warning that I think is a false positive. I get the thousands of the following warning: i18next.js:27 i18next::translator: key "xxx" for namespace "translation" won't get resolved as namespace was not yet loaded This means something IS WRONG in your application setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

    I think it's a false positive for 3 reasons:

    1. I do call init() before calling ReactDOM.render().
    2. I was working until I updated to v10.12.4 (or maybe 10.12.5, not sure...).
    3. All my localized strings are correctly displayed in my app.

    Before all the warnings, the console prints this:

    i18next: languageChanged fr-FR
    i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: "translation", fallbackLng: Array(1), …}
    

    Occurs in following versions npm 6.12.0 react-i18next 10.13.2

    OS (please complete the following information):

    • Device: PC Windows 10
    • Browser: Chrome 78.0.3904.70 (Build officiel) (64 bits)
    opened by Robloche 54
  • missingKey issue

    missingKey issue

    Hi, i get this console error in any interaction with my view 'i18next::translator: missingKey fr backoffice'

    even i tried ti put react: { wait: true, }

    but this did not work

    Help!

    opened by wijdench 54
  • Make the translation function fully type-safe

    Make the translation function fully type-safe

    With Typescript 4.1, now it is possible to use recursive conditional type and template literal string. This PR aims to make the t function fully typed and supporting single and multiple namespaces. It works with useTranslation (hooks), withTranslation (HoC), Trans Component and Translation (render prop).

    How to use it

    You just have to rely on type augmentation technique to override the default Resources with the resource language object.

    For example:

     // src/i18n/config.ts
    export const resourcesEN = {
      earnings: {
        header: {
          title: 'Earnings',
          subTitle: 'See your Earnings'
        },
        notes: 'Balance'
      }
    };
    
    i18n.use(initReactI18next).init({
      resources: {
        en: resourcesEN,
      },
    });
    
    

    Type augmentation

    // @types/react-i18next/index.d.ts
    import "react-i18next";
    import resourcesEN from "../../src/i18n/config";
    
    declare module "react-i18next" {
      type DefaultResources = typeof resourcesEN;
      interface Resources extends DefaultResources {}
    }
    

    And that's all!!! it works like magic! I've prepared a few examples using useTranslation.

    Using single and multiple namespaces: https://tsplay.dev/gWozjm

    Array case within the resources JSON: https://tsplay.dev/nmq0ZN

    Without Namespace: https://tsplay.dev/rw21xW

    Below is the diff of the changes that I made: https://gist.github.com/pedrodurek/b23c17bebd9619b0dc0651bc3949a82e/revisions#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8

    Let me know if you want me to change anything, thank you guys! I hope this can help everyone who relies on i18next and typescript.

    Checklist

    • [x] only relevant code is changed (make a diff before you submit the PR)
    • [x] run tests npm run test
    • [ ] tests are included
    • [ ] documentation is changed or added
    opened by pedrodurek 43
  • Error occurs on render when using tOptions.interpolation

    Error occurs on render when using tOptions.interpolation

    🐛 Bug Report

    With the merge of my PR https://github.com/i18next/react-i18next/pull/1204, when I try to pass interpolation to tOptions, an error occurs. When I remove the tOptions prop that I passed in, then it works, which is very weird :thinking:.

    In the console React on the first few lines says:

    The above error occurred in the <br> component:
        in br (at dashboard-greeting/index.tsx:40)
        in Trans (at dashboard-greeting/index.tsx:34)
    

    In the very last line of console React says React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

    To Reproduce

    To reproduce this you would have to use Trans like this:

    <Trans
            i18nKey="home:UserGreetingHeadline"
            defaults="Hallo {{ firstName }},<br/>
            willkommen auf <bold>meine</bold>tonies, hier kannst du ganz zentral
            Deine Toniesammlung und Tonieboxen verwalten."
            values={{ firstName: 'Tiger<no>' }}
            components={{ br: <br />, bold: <strong /> }}
            tOptions={{ interpolation: { escapeValue: true } }}
          />
    

    As for the i18nKey, you do not have to specifically put it into a home.json file :+1:.

    Expected behavior

    I do expect this to at least be able to render, with or without tOptions prop. I still find it very strange that it is working when I do not use the tOptions prop.

    PS. I am happy to work on whatever has to be fixed in case this happens because of either my last PR or if anything else has to be changed :two_hearts:.

    Pictures

    Picture of the error:

    Screenshot from 2020-12-03 07-50-13

    Picture when not using tOptions prop, then it works apparently :thinking: :

    Here the message is also broken because of the HTML tags in firstName :cry:. Screenshot from 2020-12-03 07-51-35

    Your Environment

    • runtime version: i.e. node v14.15.0
    • i18next version: i.e. 11.7.4
    • os: Linux, Ubuntu
    stale 
    opened by narutosstudent 42
  • v10: hooks and suspense

    v10: hooks and suspense

    The plan is to provide both versions in the future:

    • v10 will be the version having the new hooks and suspense version only
    • v9 will be the last major version having the current react-i18next available (will go into maintenance mode -> only bug fixes - no new features)

    We for sure will have to maintain v9 for a while.

    TODO:

    • [x] rename useT -> useTranslation, withT -> withTranslations
    • [x] report namespaces functionality (auto enabled under the hood - accessible via getFunction)
    • [x] handle initialStore, initialLanguage (where? existing Hook, new explicit useSSRI18n Hook, new explicit withSSRI18n HOC)
    • [x] rename useReactI18n with useReactI18next here: https://github.com/i18next/react-i18next/blob/master/src/hooks/context.js#L35
    • [x] create a next.js sample as proof of concept: getInitialProps as a HOC, or just a plain function provided to get that values for initialI18nStore and initialLanguage from react-i18next? (https://github.com/i18next/react-i18next/issues/671 seems a prove of working as expected)
    • [x] add tests for all the new stuff
    • [x] add typings for typescript

    Release winter 2018/19: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html (won't be 16.7!!! https://reactjs.org/blog/2018/12/19/react-v-16-7.html)

    Release seems to be 4th of February: https://github.com/facebook/react/pull/14692

    v10 (hooks) 
    opened by jamuhl 42
  • React router unmounts, set state and change language not playing well together

    React router unmounts, set state and change language not playing well together

    Describe the bug When changing language (with XHR backend setup), changing the route in react-router and setting a state value I get the well-known warning below:

    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

    I'm guessing it's due to the async XHR call to the language file because it only happens on the first load.

    I tried to go around the issue but couldn't nail it so far.

    I set up a code sandbox example here: https://codesandbox.io/s/6vm8o90jpk

    Note: I'm not sure this belongs to this repo or not, if you want me to move it somewhere else please let me know.

    Thanks for your help!

    Occurs in react-i18next version 10.5.1

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'https://6vm8o90jpk.codesandbox.io/en/hello'
    2. Open the console
    3. Click on 'Change lang'
    4. See the error in console

    Expected behaviour A clear and concise description of what you expected to happen.

    Screenshots http://recordit.co/tKnLmlyKMg

    OS :

    • Device: MBP 2017 15"
    • Browser: Chrome 72.0.3626.121
    opened by johnraz 40
  • useTranslation breaking

    useTranslation breaking "Rules of Hooks"

    Describe the bug We're using the new useTranslation hook in our components. However, during development React complains that some hooks have been rendered conditionally and that the amount of hooks in a component has changed. When switching back to the Translation HOCs the error disappeared, so I assume it's because of this line here:

    https://github.com/i18next/react-i18next/blob/ece439751c09b0cbe8170f07bfe79617ce589cb8/src/useTranslation.js#L14

    Conditionally rendering hooks break the "Rules of Hooks", so this should be refactored to always render all hooks.

    Our component does not render any hooks conditionally, I have checked thrice.

    Occurs in react-i18next version 10.0.5

    Expected behaviour No error to occur and no hooks rendering conditionally.

    Screenshots image

    OS (please complete the following information):

    • Device: MBP 2015, Latest MacOS
    • Browser: Chrome 72.0.3626.96
    opened by NeoLegends 40
  • React.lazy usage with useTranslation hook

    React.lazy usage with useTranslation hook

    Describe the bug I have a few pages that use React.lazy. It seems that on those pages, my translations aren't loaded (or maybe are loaded after the component renders).

    I've tried several variations of setting react: { useSuspense: false} and useTranslation('translations', {useSuspense: false})` but have had no success getting translations to display.

    I'm not sure if this is a bug, or a misconfiguration on my part.

    Occurs in react-i18next version 10.6.1

    To Reproduce

    1. Use the following config: i18n.ts
    import i18n from 'i18next';
    import LanguageDetector from 'i18next-browser-languagedetector';
    import Backend from 'i18next-xhr-backend';
    import {initReactI18next} from 'react-i18next';
    
    i18n
      .use(Backend)
      .use(LanguageDetector)
      .use(initReactI18next)
      .init({
        defaultNS: 'translation',
        fallbackLng: 'en',
        interpolation: {
          escapeValue: false, // not needed for react as it escapes by default
        },
        load: 'languageOnly',
        saveMissing: true,
      });
    
    export default i18n;
    

    Optionally add react: { useSuspense: false}

    1. Lazy load a component that uses the useTranslation hook:
    const NotFound = React.lazy(() => import('./NotFound'));
    
    import React from 'react';
    import {useTranslation} from 'react-i18next';
    
    const NotFound: React.SFC = () => {
      const [t] = useTranslation();
      return <h1 data-testid='not-found-heading'>{t('not-found')}</h1>;
    };
    
    export default NotFound;
    

    Optionally use useTranslation('translations', {useSuspense: false})`

    Expected behaviour I expect to see my translations, not the key of the translation.

    OS (please complete the following information):

    • Device: 2016 MBP 13" macOS 10.14.4
    • Browser: Firefox Developer Edition 67.0b6
    opened by DevanB 37
  • Can't find a way to make it work, error with 'options' or 'getFixedT'

    Can't find a way to make it work, error with 'options' or 'getFixedT'

    Hi,

    I'm trying to configure i18next with my React project and I can't make it work at all..

    Whatever I try, I get either this :

    TypeError: Cannot read property 'options' of undefined
        at new Translate (/Users/ank49/Documents/React Projects/Portfolio React i18n/node_modules/react-i18next/dist/commonjs/translate.js:65:32)
    

    or this :

    TypeError: Cannot read property 'getFixedT' of undefined
        at Translate.componentWillMount (/Users/ank49/Documents/React Projects/Portfolio React i18n/node_modules/react-i18next/dist/commonjs/translate.js:84:46)
    

    I initialized my i18n with the React and WebPack 2 example as the following :

    import i18n from 'i18next'
    import LanguageDetector from 'i18next-browser-languagedetector'
    
    i18n.use(LanguageDetector)
        .init({
          loadPath:    'locales/{{lng}}/{{ns}}.json',
          preload:     ['en-US', 'fr-FR'],
          fallbackLng: 'fr-FR',
          // wait: true, // globally set to wait for loaded translations in translate hoc
    
          // have a common namespace used around the full app
          ns: ['common',
            'navbar',
            'footer',
            'header',
            'about',
            'experience',
            'skills',
            'p_app',
            'p_web',
            'cv',
            'social',
            'events',
            'contact',
            'support'],
    
          defaultNS: 'common',
    
          debug: true,
    
          // cache: {
          //   enabled: true
          // },
    
          interpolation: {
            escapeValue: false, // not needed for react!!
          },
          wait:          true,
        })
    
    export default i18n
    

    and my component I'm trying to translate is as follow :

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    import withStyles from 'isomorphic-style-loader/lib/withStyles'
    import Typist from 'react-typist'
    import { translate } from 'react-i18next'
    import { Parenthesis } from '../../components'
    
    import style from './header.scss'
    
    class Header extends Component {
      static propTypes = {
        t: PropTypes.func.isRequired,
      }
    
      render() {
        const { t } = this.props
    
        return (
          <div>
    
            <section className="header">
              <div className="header_content">
                <div className="header_content_inner">
                  <h1 id="homeTextHead">{t('header.title')}</h1>
                  <hr className="bg_dark"/>
                  <br/>
                  <Typist avgTypingDelay={90} className="typed_text">
                    {t('header.name')}
                    <br/>
                    <Parenthesis>{t('header.pseudo')}</Parenthesis>
                    <br/>
                    <br/>
                    {t('header.description')}
                  </Typist>
                </div>
              </div>
            </section>
    
          </div>
        )
      }
    }
    
    export default withStyles(style)(translate(['header'], { wait: true })(Header))
    

    I also tried with the decorator but I got the same issues..

    @translate(['header'])
    class Header extends Component {
    ...
    }
    
    export default withStyles(style)(Header)
    

    Any help is welcome, thanks in advance guys !

    opened by Pomanks 36
  • `t` function doesn't work with `keyPrefix` and array of keys

    `t` function doesn't work with `keyPrefix` and array of keys

    🐛 Bug Report

    t function doesn't work if keyPrefix is specified and array of keys provided. It fails with missingKey error. As far as I understood, this line of code is a reason of that error - https://github.com/i18next/i18next/blob/5bd9ac037867edbb45fcdf9976e3b5ea48f164d5/src/i18next.js#L396

    i18next.use(initReactI18next).init({
      // ... 
      resources: {
        en: {
          translation: {
            group: {
              key1: "Translation 1",
              key2: "Translation 2"
            }
          }
        }
      }
    });
    
    export default function App() {
      const { t } = useTranslation("translation", { keyPrefix: "group" });
    
      return t(["key1", "key2"]); // Doesn't work
    }
    

    To Reproduce

    A codesandbox example

    Expected behavior

    Translation for key1 value should be returned

    opened by AlexKrupko 2
  • [Android-React Native] JSON files are not being loaded when phone has no connection

    [Android-React Native] JSON files are not being loaded when phone has no connection

    🐛 Bug Report

    JSON files are not being loaded when android phone has no connection. It works fine on iOS though. I have seen a similar issue but the author doesn't remember how he fixed it.

    To Reproduce

    A minimal reproducible example. A codesandbox example or similar or at least steps to reproduce the behavior:

      const i18nRef = useRef(createInstance());
      const [i18nReady, setI18nReady] = useState(false);
    
      const jsonMap = {
        en,
        de,
      };
    
      const initI18nInstance = async () => {
        const { languageTag } = deviceLanguage;
    
        const cachedTranslations = await getCachedTranslations(languageTag);
    
        i18nRef.current.init({
          lng: languageTag,
          cache: false,
          resources: {
            [languageTag]: {
              [DEFAULT_NAMESPACE]: cachedTranslations
                ? cachedTranslations.translations
                : jsonMap[languageTag],
            },
          },
        });
    

    Expected behavior

    It should load json files and I should be able to see translation values instead of keys

    Your Environment

    • runtime version:node 16
    • i18next version: 22.4.6
    • "react-i18next version": "11.8.5"
    • os: Android
    opened by cengizhanhakan 1
  • Type instantiation is excessively deep and possibly infinite.ts(2589)

    Type instantiation is excessively deep and possibly infinite.ts(2589)

    🐛 Bug Report

    After updating react-i18next from [11.16.2] to [12.1.1], I have started getting an error on the useTranslation bit of the following line:

    const { t } = useTranslation('trans');

    The error is: Type instantiation is excessively deep and possibly infinite.ts(2589)

    I can ignore it by using /* @ts-ignore */ but that's not ideal. The error started appearing after the update and it's only on this single file (the whole app uses translation in the exact same way but strangely I am only getting this error here).

    To Reproduce

    Cannot reproduce

    Home.tsx

    import { useTranslation } from 'react-i18next';
    
    const Home = () => {
      const { t } = useTranslation('trans');
    
      return (
        <div>
          <div>{t('home.firstLine')}</div>
          <div>{t('home.secondLine')}</div>
        </div>
      );
    };
    
    export default Home;
    

    init-i18next.js

    import i18next from 'i18next';
    import { initReactI18next } from 'react-i18next';
    import * as fr from '@static/translations/fr.json';
    import * as en from '@static/translations/en.json';
    
    const resources = {
      fr: {
        trans: fr
      },
      en: {
        trans: en
      }
    };
    
    const lng = navigator ? navigator.language.substring(0, 2) : 'fr';
    
    i18next.use(initReactI18next).init({
      lng, // as default
      fallbackLng: 'fr',
      defaultNS: 'trans',
      resources,
      compatibilityJSON: 'v3',
      interpolation: {
        escapeValue: false
      }
    });
    
    export default i18next;
    

    i18next.d.ts

    import { resources, defaultNS } from './i18next';
    
    declare module 'i18next' {
      interface CustomTypeOptions {
        defaultNS: typeof defaultNS;
        resources: typeof resources['fr'];
      }
    }
    

    Expected behavior

    No errors were expected, like I had before the package update.

    Your Environment

    • runtime version: React 18.0.0
    • i18next version: 22.4.6
    • react-i18next version: 12.1.1
    • os: Mac
    typescript 
    opened by xdebbie 5
  • Typescript slow compilation

    Typescript slow compilation

    🐛 Bug Report

    In our project, we have 60430+ keys distributed across 77 namespaces and we have a good amount of deeply nested keys as well. The Typescript compilation almost died on running the TS check.

    To Reproduce

    1. Add 60430+ keys

    2. Add a typing file

    
    import 'react-i18next';
    // Resouce with 77 namespace and 60430+ keys
    import type { TranslationResources } from '../translations/types';
    declare module 'react-i18next' {
      interface CustomTypeOptions {
        defaultNS: 'common';
        resources: TranslationResources;
      }
    }
    

    Your Environment

    node - 12.19.1 npm - 6.14.8 typescript - 4.9.3 react-i18next - 11.18.0 i18next - 21.8.13

    typescript 
    opened by Lav39 4
  • Type errors when doing interpolation in react-typescript/simple

    Type errors when doing interpolation in react-typescript/simple

    🐛 Bug Report

    Using the simple react-typescript example and introducing a variable to interpolate in the translation file causes Type instantiation is excessively deep and possibly infinite. or 'TFunctionDetailedResult<never>' is not assignable to type 'ReactI18NextChild | Iterable<ReactI18NextChild>'. Property '[Symbol.iterator]' is missing in type 'TFunctionDetailedResult<never>' but required in type 'Iterable<ReactI18NextChild>' to be raised

    To Reproduce

    Using the simple react-typescript example in this repo, introduce a variable in the translation file

    {
      "title": "Welcome to react using react-i18next fully type-safe",
      "description": {
        "part1": "This is a simple example. {{hello}}",
        "part2": "😉"
      }
    }
    

    then in app.tsx try accessing description.part1 using the t function derived from useTranslation.

    <p>{t('description.part1', {hello: 'string'})}</p>
    

    or

    <p>{t('translation:description.part1', {hello: 'string'})}</p>
    

    respectively.

    See this commit https://github.com/adr29truck/react-i18next/commit/24a615a6bc1b56b133e06cefdf21662efc7e4d82 on fork

    Expected behavior

    It should not raise type errors.

    Your Environment

    • runtime version: node v16.13.0, chrome
    • i18next version: ^22.4.3
    • react-i18next version: ^12.1.1
    • os: Mac
    can not reproduce typescript 
    opened by adr29truck 9
  • react-i18next:: You will need to pass in an i18next instance by using initReactI18next

    react-i18next:: You will need to pass in an i18next instance by using initReactI18next

    🐛 Bug Report

    getting this issue in my react native project. Using the same versions in another react native project both has same react native version. But issue persist in one not another. image

    MY code i18next file----- import i18next from 'i18next'; import english from './english.json';

    import { initReactI18next } from 'react-i18next';

    i18next.use(initReactI18next).init({ compatibilityJSON: 'v3', lng: 'en', resources: { en: english, }, react: { useSuspense: false, }, });

    export default i18next;

    --using manner---- const { t, i18n } = useTranslation(); ----{t('ReviewingYou')}

    Your Environment

    • runtime version: i.e. node v14, deno, browser xy
    • i18next version: "i18next": "^22.0.6", "react-i18next": "^12.0.0", "react-native-translation": "^1.1.0", "react": "18.1.0", react native version 0.70.6
    • os: Windows
    • any other relevant information
    can not reproduce 
    opened by Namangaraaz 15
Owner
i18next
Organization for i18next.com and anything i18next related.
i18next
Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js Features Usage Examples Scoped translations Change current locale Use JSON files instead of TS for l

Tom Lienard 251 Dec 22, 2022
i18next: learn once - translate everywhere

i18next: learn once - translate everywhere i18next is a very popular internationalization framework for browser or any other javascript environment (e

i18next 6.6k Dec 30, 2022
human friendly i18n for javascript (node.js + browser)

BabelFish - human friendly i18n for JS Internationalisation with easy syntax for node.js and browser. Classic solutions use multiple phrases for plura

Nodeca 246 Nov 20, 2022
lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’ files

jQuery.i18n.properties About jQuery.i18n.properties is a lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’

null 408 Dec 25, 2022
🌐jQuery based internationalization library

jQuery.i18n NOTE: For jquery independent version of this library, see https://github.com/wikimedia/banana-i18n jQuery.i18n is a jQuery based Javascrip

Wikimedia 649 Jan 4, 2023
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.9k Dec 29, 2022
A JavaScript Internationalization Framework

FBT is an internationalization framework for JavaScript designed to be not just powerful and flexible, but also simple and intuitive. It helps with th

Facebook 3.8k Jan 8, 2023
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript

Linguijs ?? ?? A readable, automated, and optimized (5 kb) internationalization for JavaScript Documentation · Documentation 2.x · Quickstart · Exampl

Lingui 3.5k Jan 2, 2023
ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

null 1.6k Dec 23, 2022
A general purpose internationalization library in 292 bytes

A general purpose internationalization library in 298 bytes! Features Simple and Familiar API Unobstrusive and Unopinionated Less than 300 bytes – inc

Luke Edwards 713 Dec 21, 2022
ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

null 1.6k Dec 23, 2022
Gettext Style i18n for Modern JavaScript Apps

Jed Gettext Style i18n for Modern JavaScript Apps For more info

null 879 Dec 14, 2022
Extract and merge i18n xliff translation files for angular projects.

Angular extract i18n and merge This extends Angular CLI to improve the i18n extraction and merge workflow. New/removed translations are added/removed

Daniel Schreiber 86 Jan 5, 2023
Merges XLIFF 1.2/2.0 files. Usable for Angular i18n automation.

XLIFF Simple Merge This program automates the merging of XLIFF files (version 1.2 and 2.0). New translations from the input file (e.g. "messages.xlf")

Daniel Schreiber 9 Dec 15, 2022
The monorepo home to all of the FormatJS related libraries, most notably react-intl.

FormatJS This repository is the home of FormatJS and related libraries. Slack: Join us on Slack at formatjs.slack.com for help, general conversation a

FormatJS 13.5k Dec 31, 2022
Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next IMPORTANT: Master Branch is the new v10 using hooks. $ v10.0.0 npm i react-i18next react-native: To use hooks within react-native, you m

i18next 7.9k Dec 30, 2022
Internationalization for svelte framework. Based on i18next ecosystem

svelte-i18next Svelte wrapper for i18next npm i svelte-i18next i18next Implementation This library wraps an i18next instance in a Svelte Store to obs

Nishu Goel 20 Dec 9, 2022
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
The alternative internationalization (i18n) library for Angular

NGX Locutus The alternative Angular Translation Library used for large scale microfrontend translations. No more worrying about shared translation ass

Stefan Haas 9 May 31, 2022
Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js Features Usage Examples Scoped translations Change current locale Use JSON files instead of TS for l

Tom Lienard 251 Dec 22, 2022