Convert Figma logo to code with AI

i18next logoi18next

i18next: learn once - translate everywhere

8,058
655
8,058
7

Top Related Projects

:globe_with_meridians: Internationalization plugin for Vue.js

14,463

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Give your JavaScript the ability to speak many languages.

3,211

Translate your Go program into multiple languages.

๐ŸŒ ๐Ÿ“– A readable, automated, and optimized (3 kb) internationalization for JavaScript

Quick Overview

i18next is a popular internationalization framework for JavaScript. It provides a comprehensive solution for translating web and mobile applications, offering a wide range of features and plugins to support various use cases and platforms.

Pros

  • Highly flexible and extensible with a plugin-based architecture
  • Supports multiple languages and pluralization
  • Compatible with various JavaScript frameworks and environments (React, Angular, Vue, Node.js, etc.)
  • Active community and regular updates

Cons

  • Learning curve can be steep for beginners due to its extensive feature set
  • Configuration can be complex for advanced use cases
  • Performance may be impacted when loading large translation files

Code Examples

  1. Basic usage:
import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "key": "Hello world!"
      }
    }
  }
});

console.log(i18next.t('key')); // Output: Hello world!
  1. Pluralization:
i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "key_one": "{{count}} item",
        "key_other": "{{count}} items"
      }
    }
  }
});

console.log(i18next.t('key', { count: 1 })); // Output: 1 item
console.log(i18next.t('key', { count: 5 })); // Output: 5 items
  1. Interpolation:
i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "welcome": "Welcome, {{name}}!"
      }
    }
  }
});

console.log(i18next.t('welcome', { name: 'John' })); // Output: Welcome, John!

Getting Started

To get started with i18next, follow these steps:

  1. Install i18next:
npm install i18next
  1. Import and initialize i18next in your project:
import i18next from 'i18next';

i18next.init({
  lng: 'en', // Set the default language
  resources: {
    en: {
      translation: {
        // Add your translation keys and values here
        "hello": "Hello",
        "goodbye": "Goodbye"
      }
    }
  }
});
  1. Use the t function to translate your content:
console.log(i18next.t('hello')); // Output: Hello

For more advanced usage and integration with specific frameworks, refer to the official i18next documentation.

Competitor Comparisons

:globe_with_meridians: Internationalization plugin for Vue.js

Pros of vue-i18n

  • Tightly integrated with Vue.js, offering seamless internationalization for Vue applications
  • Supports both component-based and global translations, allowing for flexible usage
  • Provides built-in datetime and number localization features

Cons of vue-i18n

  • Limited to Vue.js ecosystem, not suitable for other frameworks or vanilla JavaScript
  • Less extensive plugin ecosystem compared to i18next
  • May have a steeper learning curve for developers not familiar with Vue.js

Code Comparison

vue-i18n:

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: { hello: 'Hello' },
    ja: { hello: 'ใ“ใ‚“ใซใกใฏ' }
  }
})

i18next:

i18next.init({
  lng: 'en',
  resources: {
    en: { translation: { hello: 'Hello' } },
    ja: { translation: { hello: 'ใ“ใ‚“ใซใกใฏ' } }
  }
})

Both libraries offer similar functionality for basic internationalization, but their implementation and usage differ based on their target ecosystems. vue-i18n is specifically designed for Vue.js applications, while i18next is a more versatile solution that can be used across various JavaScript environments.

14,463

The monorepo home to all of the FormatJS related libraries, most notably react-intl.

Pros of formatjs

  • Built-in support for React and other modern JavaScript frameworks
  • Robust handling of pluralization and complex message formatting
  • Extensive tooling for message extraction and compilation

Cons of formatjs

  • Steeper learning curve due to more complex API
  • Larger bundle size compared to i18next
  • Less flexibility for custom backends and loading strategies

Code Comparison

formatjs:

import { FormattedMessage } from 'react-intl';

<FormattedMessage
  id="welcome"
  defaultMessage="Welcome, {name}!"
  values={{ name: 'John' }}
/>

i18next:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();
t('welcome', { name: 'John' });

Both formatjs and i18next are popular internationalization libraries for JavaScript applications. formatjs excels in handling complex message formatting and provides strong integration with React, while i18next offers a simpler API and greater flexibility in terms of backend integration and loading strategies. The choice between the two often depends on the specific requirements of the project and the preferred balance between feature richness and simplicity.

Give your JavaScript the ability to speak many languages.

Pros of Polyglot.js

  • Lightweight and simple to use
  • Easy integration with existing JavaScript projects
  • Supports basic pluralization rules out of the box

Cons of Polyglot.js

  • Limited features compared to i18next
  • Lacks advanced pluralization and interpolation options
  • No built-in support for language detection or loading translations

Code Comparison

Polyglot.js:

import Polyglot from 'node-polyglot';

const polyglot = new Polyglot();
polyglot.extend({"hello": "Hello, %{name}!"});
console.log(polyglot.t("hello", {name: "world"}));

i18next:

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        "hello": "Hello, {{name}}!"
      }
    }
  }
});
console.log(i18next.t('hello', { name: 'world' }));

Both libraries provide similar basic functionality for internationalization, but i18next offers more advanced features and flexibility. Polyglot.js is simpler and more lightweight, making it suitable for smaller projects or those with basic translation needs. i18next, on the other hand, provides a more comprehensive solution for complex internationalization requirements, including plugins for language detection, backend integration, and caching.

3,211

Translate your Go program into multiple languages.

Pros of go-i18n

  • Designed specifically for Go, offering idiomatic and efficient implementation
  • Supports plural forms and gender-specific translations
  • Lightweight and easy to integrate into Go projects

Cons of go-i18n

  • Limited ecosystem compared to i18next
  • Fewer advanced features like interpolation or nesting
  • Less extensive documentation and community support

Code Comparison

go-i18n:

import "github.com/nicksnyder/go-i18n/v2/i18n"

bundle := i18n.NewBundle(language.English)
localizer := i18n.NewLocalizer(bundle, "en")

localizer.Localize(&i18n.LocalizeConfig{
    MessageID: "greeting",
    TemplateData: map[string]string{"Name": "Alice"},
})

i18next:

import i18next from 'i18next';

i18next.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        greeting: 'Hello {{name}}'
      }
    }
  }
});

i18next.t('greeting', { name: 'Alice' });

Both libraries provide internationalization capabilities, but go-i18n is tailored for Go projects, while i18next offers a more extensive feature set and broader language support across multiple platforms.

๐ŸŒ ๐Ÿ“– A readable, automated, and optimized (3 kb) internationalization for JavaScript

Pros of js-lingui

  • Offers a more streamlined and intuitive API for React applications
  • Provides better TypeScript support out of the box
  • Includes a powerful CLI tool for managing translations and extracting messages

Cons of js-lingui

  • Has a smaller ecosystem and community compared to i18next
  • Limited support for non-React frameworks and libraries
  • Steeper learning curve for developers new to internationalization

Code Comparison

i18next:

import i18n from 'i18next';

i18n.init({
  lng: 'en',
  resources: {
    en: {
      translation: {
        key: 'Hello, {{name}}!'
      }
    }
  }
});

console.log(i18n.t('key', { name: 'World' }));

js-lingui:

import { i18n } from '@lingui/core';
import { t } from '@lingui/macro';

i18n.load('en', {
  Hello: 'Hello, {name}!'
});
i18n.activate('en');

console.log(t`Hello ${'World'}`);

Both i18next and js-lingui are popular internationalization libraries for JavaScript applications. i18next offers a more flexible and framework-agnostic approach, while js-lingui provides a more opinionated and React-focused solution. The choice between the two depends on the specific needs of your project and your preferred development workflow.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

i18next: learn once - translate everywhere Tweet

CI Code Climate Coveralls Package Quality cdnjs version npm version npm Gurubase

i18next is a very popular internationalization framework for browser or any other javascript environment (eg. Node.js, Deno).

ecosystem

i18next provides:

For more information visit the website:

Our focus is providing the core to building a booming ecosystem. Independent of the building blocks you choose, be it react, angular or even good old jquery proper translation capabilities are just one step away.

Documentation

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

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


Gold Sponsors


From the creators of i18next: localization as a service - locize.com

A translation management system built around the i18next ecosystem - locize.com.

locize

With using locize you directly support the future of i18next.


NPM DownloadsLast 30 Days