Skip to main content

React i18next internationalization

org.openrewrite.codemods.ReactI18Next

Automatically internationalizes React applications by extracting hardcoded strings and replacing them with react-i18next translation calls. Handles JSX text, attributes, and template literals with variables. Creates and updates a translation JSON file with extracted strings.

Recipe source​

GitHub, Issue Tracker, Maven Central

This recipe is available under the Moderne Source Available License.

Options​

TypeNameDescriptionExample
StringtranslationFilePathOptional. Path to the translation JSON file where extracted strings will be stored. Defaults to translations.json in the root of the project../src/locales/en.json
StringimportNameThe package name to import translation functions from. Required.react-i18next
StringtranslationRootOptional. Root key in the translation file to organize translations under. Defaults to common.common
StringfilePatternOptional. Glob pattern to specify which files to transform. Defaults to all files.src/**/*.tsx
StringparserOptional. Parser to use for transforming files. Defaults to auto-detection based on file extensions (tsx/ts/babel).tsx

Usage​

This recipe has required configuration parameters. Recipes with required configuration parameters cannot be activated directly (unless you are running them via the Moderne CLI). To activate this recipe you must create a new recipe which fills in the required parameters. In your rewrite.yml create a new recipe with a unique name. For example: com.yourorg.ReactI18NextExample. Here's how you can define and customize such a recipe within your rewrite.yml:

rewrite.yml
---
type: specs.openrewrite.org/v1beta/recipe
name: com.yourorg.ReactI18NextExample
displayName: React i18next internationalization example
recipeList:
  - org.openrewrite.codemods.ReactI18Next:
      translationFilePath: ./src/locales/en.json
      importName: react-i18next
      translationRoot: common
      filePattern: src/**/*.tsx
      parser: tsx

Now that com.yourorg.ReactI18NextExample has been defined, activate it and take a dependency on org.openrewrite.recipe:rewrite-codemods:0.20.0 in your build file:

  1. Add the following to your build.gradle file:
build.gradle
plugins {
    id("org.openrewrite.rewrite") version("latest.release")
}

rewrite {
    activeRecipe("com.yourorg.ReactI18NextExample")
    setExportDatatables(true)
}

repositories {
    mavenCentral()
}

dependencies {
    rewrite("org.openrewrite.recipe:rewrite-codemods:0.20.0")
}
  1. Run gradle rewriteRun to run the recipe.

See how this recipe works across multiple open-source repositories​

Run this recipe on OSS repos at scale with the Moderne SaaS.

The community edition of the Moderne platform enables you to easily run recipes across thousands of open-source repositories.

Please contact Moderne for more information about safely running the recipes on your own codebase in a private SaaS.

Data Tables​

Source files that had results​

org.openrewrite.table.SourcesFileResults

Source files that were modified by the recipe run.

Column NameDescription
Source path before the runThe source path of the file before the run. null when a source file was created during the run.
Source path after the runA recipe may modify the source path. This is the path after the run. null when a source file was deleted during the run.
Parent of the recipe that made changesIn a hierarchical recipe, the parent of the recipe that made a change. Empty if this is the root of a hierarchy or if the recipe is not hierarchical at all.
Recipe that made changesThe specific recipe that made a change.
Estimated time savingAn estimated effort that a developer to fix manually instead of using this recipe, in unit of seconds.
CycleThe recipe cycle in which the change was made.