OSS TanbouOn this page
Overview
react-i18next connects the i18next core to React's component model. useTranslation, Trans, I18nextProvider, and initReactI18next bring translation keys and resources into React UI, while SSR helpers and React Native support let the same i18n model span additional runtimes.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Use t() and the active i18n instance through useTranslation
The hook exposes a translation function and i18next instance so component strings can be replaced by translation keys without custom subscription plumbing.
Represent rich translated markup with Trans
The Trans component maps messages containing strong, links, and other React elements to translation resources, covering content that is more complex than plain text substitution.
Best fit
Fits React and React Native applications that reuse an existing i18next resource model
It is useful when translation keys, resources, detection, and backends live in i18next while components interact through React-specific hooks and components.
Sources: [1]
Before adoption
Version 17.0.15 requires i18next 26.2+ and React 16.8+
Package metadata declares i18next >=26.2.0 and React >=16.8.0 as peers and supports TypeScript 5, 6, or 7 as an optional peer.
Sources: [2]
Translation-management SaaS is optional, not a binding requirement
The README promotes services such as Locize but explicitly states that i18next works without them. Evaluate the React binding separately from translation-management operations or SaaS.
Sources: [1]
Official sources
- [1]react-i18next v17.0.15 README(2026-10-05)
- [2]react-i18next 17.0.15 package metadata(2026-10-05)
- [3]react-i18next 17.0.15 exports(2026-10-05)
- [4]react-i18next v17.0.15 tag commit(2026-10-05)
- [5]react-i18next MIT license(2026-10-05)
Supplemental curator note
react-i18next is separate from the i18next core repository and package. Translation-management services such as Locize are optional; the binding works with i18next without them.
Try it in 3 steps
- 1
Install pinned react-i18next 17.0.15 and i18next
Create an isolated npm project with the React binding, i18next core, and exact React peer dependencies.
demo=$(mktemp -d "${TMPDIR:-/tmp}/react-i18next.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact react-i18next@17.0.15 i18next@26.4.2 react@19.2.0 react-dom@19.2.0 - 2
Connect an inline translation resource to React
Build a minimal server-rendered useTranslation example using only inline resources and no external translation service.
printf '%s\n' "import React from 'react'" "import {renderToStaticMarkup} from 'react-dom/server'" "import i18next from 'i18next'" "import {I18nextProvider,initReactI18next,useTranslation} from 'react-i18next'" "const i18n=i18next.createInstance()" "await i18n.use(initReactI18next).init({lng:'en',resources:{en:{translation:{hello:'Hello'}}}})" "function App(){const {t}=useTranslation();return React.createElement('span',null,t('hello'))}" "console.log(renderToStaticMarkup(React.createElement(I18nextProvider,{i18n},React.createElement(App))))" > demo.mjs - 3
Verify the translated markup
Require the component under I18nextProvider to read the resource and render the expected translation.
test "$(node demo.mjs)" = '<span>Hello</span>'
Growth
Growth trends · Last 30 days
10,051 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 5
- Open PRs
- 0
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- react
- react-native
- translation
- internationalization
- i18n
- i18next
- ssr
- Stars
- 10,051
- Forks
- 1,048
- Watchers
- 43
- Open issues
- 1
- Contributors
- 190
- Owner type
- Organization
- Primary language
- JavaScript
- License
- MIT
- Repository last updated
- Oct 5, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Bootstrap174,991 Stars
2 shared tag(s) · 1 shared category(s)
Build responsive interfaces from a CSS/Sass grid, utilities, components, and native JavaScript
MDX - React Router56,590 Stars
2 shared tag(s) · 1 shared category(s)
multi-strategy routing for URLs, nested routes, navigation, and data flow in React applications
TypeScript - styled-components41,099 Stars
2 shared tag(s) · 1 shared category(s)
CSS-in-JS for React using tagged templates with scoped styles, theming, SSR, and React Native support
TypeScript - React250,891 Stars
3 shared tag(s) · 1 shared category(s) · Same language
build web and native interfaces from declarative components
JavaScript - Emotion18,019 Stars
3 shared tag(s) · 1 shared category(s) · Same language
high-performance CSS-in-JS for React with object/string styles, composition, theming, and runtime caching
JavaScript - Relay18,965 Stars
3 shared tag(s) · 1 shared category(s)
GraphQL data framework that colocates queries with React components and manages fetching, caching, mutations, and generated artifacts
Rust
Report incorrect information
Tell us if any listing information is incorrect or outdated.