# @nhummel/react-i18next-fluent > A translation component for react-i18next with an API for humans. Latest version **1.0.10** (published 2022-09-05) · MIT license · 0 weekly downloads ## Install ```sh npm install @nhummel/react-i18next-fluent pnpm add @nhummel/react-i18next-fluent yarn add @nhummel/react-i18next-fluent bun add @nhummel/react-i18next-fluent ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.10 | | Published | 2022-09-05 | | First published | 2022-02-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 67.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Maintainers | nhummel | | Keywords | i18n, internationalization, i18next, react, react-i18next | ## Links - npm: https://www.npmjs.com/package/@nhummel/react-i18next-fluent - Repository: https://github.com/strangedev/react-i18next-fluent - Homepage: https://github.com/strangedev/react-i18next-fluent#readme - Issues: https://github.com/strangedev/react-i18next-fluent/issues - npm.io page: https://npm.io/package/@nhummel/react-i18next-fluent ## Dependencies (1) - [defekt](https://npm.io/package/defekt.md) 9.3.1 ## Alternatives - [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads - [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads - [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads - [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads - [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads ## Recent versions - 1.0.10 (latest) — 2022-09-05 - 1.0.9 — 2022-08-11 - 1.0.8 — 2022-08-09 - 1.0.7 — 2022-03-25 - 1.0.6 — 2022-03-24 - 1.0.5 — 2022-03-24 - 1.0.4 — 2022-02-28 - 1.0.3 — 2022-02-25 - 1.0.2 — 2022-02-25 - 1.0.1 — 2022-02-25 ## README # react-i18next-fluent A translation component for `react-i18next` with an API for humans. ## Status | Category | Status | | ---------------- | ----------------------------------------------------------------------------------------------------------- | | Version | [![npm](https://img.shields.io/npm/v/@nhummel/react-i18next-fluent)](https://www.npmjs.com/package/@nhummel/react-i18next-fluent) | | Build | ![GitHub Actions](https://github.com/strangedev/react-i18next-fluent/workflows/Release/badge.svg?branch=main) | | License | ![GitHub](https://img.shields.io/github/license/strangedev/react-i18next-fluent) | ## Introduction Translating react apps with `i18next` can be challenging. Trivial cases can be solved by using the `t` function directly in your markup. This is however limited to cases where the structure of the markup doesn't change depending on the translation. For these complex cases, `react-i18next` provides the `Trans` component. With it, we can name the components we want to use and write markup directly into our translation strings, e.g.: ```json { "welcome": "Hey there <0>{{ name }}, we're <1>thrilled to see you." } ``` While this provides the flexibility we need, the JSX itself becomes cryptic and doesn't show us what is rendered in any idiomatic way anymore, e.g.: ```tsx name, placeholder ]} /> ``` Using this library we can have both, an idiomatic and readable fallback in JSX, and the ability to change what is being rendered using translation resources. It looks like this: ```tsx { children }, Italic: ({ children }) => { children } }} interpolations={{ name: 'Gunnar' }} > {(t, { name }) => (<> Hey there, { name }, we're thrilled to see you! )} ``` ```json { "welcome": "Hi {{ name }}, wir sind begeistert dich zu sehen!" } ``` ## Getting started Install via npm or yarn: ```shell npm install @nhummel/react-i18next-fluent ``` ## Using the component In your `react-i18next` enabled application, import the `Trans` component: ```tsx import { Trans } from '@nhummel/react-i18next-fluent'; ``` To use the component, you have to specify the namespace and translation key it should use. This will be used to look up the translation from your configured resource bundles. ```tsx import { Trans } from '@nhummel/react-i18next-fluent'; /* ... */ ``` ### Writing the placeholder In the absence of suitable translations, either because you haven't written them yet, or they couldn't be loaded for some reason, the component will render the placeholder function passed to it as children: ```tsx import { Trans } from '@nhummel/react-i18next-fluent'; {(): ReactElement => (<> This is a placeholder. It may contain any valid JSX. It will be rendered by default. Be sure to wrap multiple elements in a Fragment! )} ``` While you can use any components you want inside the placeholder, you should pass all used components using the `components` property. That way, you can also use them when writing your translation resources later. You can use any valid `Component` constructor, like a `FunctionComponent`. You may access the components in the placeholder using the first parameter of the render function: ```tsx import { Trans } from '@nhummel/react-i18next-fluent'; { children } }} > {(t): ReactElement => (<> This is a placeholder. It may contain any valid JSX. It will be rendered by default. Be sure to wrap multiple elements in a Fragment! )} ``` ### Writing translations After writing the Placeholder, you're good to go. Your application will always fall back to the placeholder, so you can take your time while writing translation resources. To provide alternative translations, you simply write them into your translation resources as usual. The only difference is that you may also include any of the components you pass to the `Trans` component in you translations: ```json { "welcome": "Hi {{ name }}, wir sind begeistert dich zu sehen!" } ``` You can use and re-use these components freely, and even nest them: ```json { "welcome": "Hi {{ name }}, wir sind begeistert dich zu sehen!" } ``` If you mess up the syntax the placeholder will be used, so don't worry too much and start experimenting! ### Using interpolations You can also use interpolations to place values into your translated content. You simply pass an object containing these values to the `Trans` component. You can access the values in the placeholder using the second argument of the render function: ```tsx import { Trans } from '@nhummel/react-i18next-fluent'; {(t, { reasonsCount }): ReactElement => (<> There are { reasonsCount } good reasons to use react-i18next-fluent! )} ``` You can also access the values in your translation resources as usual: ```json { "braggadocious": "Es gibt {{ reasonsCount }} gute Gründe, react-i18next-fluent zu verwenden!" } ``` ## Caveats At the moment, pluralization and contexts are not supported, as I'm not entirely sure how these features would integrate with this library. If you've got ideas, please share them in the issues! ## Contributing Feel free to open an issue or a pull request. ### Running quality assurance ```shell npx roboter ``` --- _Source: https://npm.io/package/@nhummel/react-i18next-fluent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._