{"library":"react-i18next","title":"React i18next","description":"react-i18next is a powerful internationalization (i18n) library for React applications, built on top of the robust i18next framework. As of version 17.0.4, it leverages React Hooks, offering a modern API with `useTranslation` and `Trans` components for declarative and efficient translation management in functional components. For legacy applications or class components, it continues to support Higher-Order Components (HOCs) like `withTranslation` and `I18nextProvider`. The library maintains an active release cadence, providing comprehensive solutions for client-side and server-side i18n, including pluralization, context, interpolation, and formatting. It aims for simplicity, avoiding complex build toolchain configurations, and seamlessly integrates with the broader i18next ecosystem for features like backend loading, language detection, and caching.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-i18next"],"cli":null},"imports":["import { useTranslation } from 'react-i18next';","import { Trans } from 'react-i18next';","import { initReactI18next } from 'react-i18next';","import { withTranslation } from 'react-i18next';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport i18n from 'i18next';\nimport { initReactI18next, useTranslation, Trans } from 'react-i18next';\n\n// 1. Initialize i18next with react-i18next plugin\ni18n\n  .use(initReactI18next) // passes i18n instance to react-i18next\n  .init({\n    resources: {\n      en: {\n        translation: {\n          welcome: 'Welcome to our app!',\n          greeting: 'Hello <0>{{name}}</0>, you have <2>{{count}}</2> unread message.',\n          nameLabel: 'Your name',\n          viewMessages: 'View messages'\n        }\n      },\n      fr: {\n        translation: {\n          welcome: 'Bienvenue dans notre application !',\n          greeting: 'Bonjour <0>{{name}}</0>, vous avez <2>{{count}}</2> message(s) non lu(s).',\n          nameLabel: 'Votre nom',\n          viewMessages: 'Voir les messages'\n        }\n      }\n    },\n    lng: 'en', // Default language\n    fallbackLng: 'en',\n    interpolation: {\n      escapeValue: false // React already escapes by default\n    }\n  });\n\n// A dummy Link component for the example\nconst CustomLink = ({ to, children }: { to: string; children: React.ReactNode }) => (\n  <a href={to}>{children}</a>\n);\n\n// 2. Create a functional component using useTranslation and Trans\nfunction App() {\n  const { t, i18n } = useTranslation();\n  const userName = 'Alice';\n  const messageCount = 3;\n\n  return (\n    <div>\n      <h1>{t('welcome')}</h1>\n      {/* Example using the Trans component for content with nested elements */}\n      <Trans i18nKey=\"greeting\" values={{ name: userName, count: messageCount }}>\n        Hello <strong title={t('nameLabel')}>{{userName}}</strong>, you have <span>{{messageCount}}</span> unread message. <CustomLink to=\"/messages\">{t('viewMessages')}</CustomLink>.\n      </Trans>\n\n      <p>Current language: {i18n.language}</p>\n      <button onClick={() => i18n.changeLanguage('fr')}>Switch to French</button>\n      <button onClick={() => i18n.changeLanguage('en')}>Switch to English</button>\n    </div>\n  );\n}\n\n// Export the App component for rendering in your root ReactDOM.render call\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to initialize i18next with react-i18next, use the `useTranslation` hook for simple strings, and the `Trans` component for complex messages with nested React elements and interpolation, including dynamic language switching.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}