Nasal Piercings Manipulator
    Wondering what’s next for npm?Check out our public roadmap! »

    react-i18next
    TypeScript icon, indicating that this package has built-in type declarations

    11.8.13 • Public • Published

    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.


    Install

    npm i react-i18next

    DownloadsWeekly Downloads

    946,017

    Version

    11.8.13

    License

    MIT

    Unpacked Size

    306 kB

    Total Files

    44

    Last publish

    Collaborators

    • avatar
    • avatar