react-translation-wizard

React Translation Automation Tool

A powerful Node.js script for automating the internationalization (i18n) process in React and Next applications. This tool scans your React components, extracts text content, generates translation keys, and replaces the text with translation function calls.

Features

• Automatic Text Extraction: Finds and extracts all visible text in JSX/TSX files
• Translation Key Generation: Creates structured translation keys based on folder and file names
• Multi-language Support: Manages multiple language files simultaneously
• Smart Import Handling: Adds translation imports only where needed
• Next.js Support: Properly handles "use client" and "use server" directives
• Configurable: Highly customizable via configuration file
• Hook Insertion: Adds translation hooks only to main components
• Flexible Format: Works with various translation libraries and patterns

Configuration

Create a translation.config.json file in the project root (use example.translation.config.json as a template):

{
  "srcDir": "app",
  "languages": [
    {
      "name": "en",
      "file": "messages/en.json"
    },
    {
      "name": "fr",
      "file": "messages/fr.json"
    }
  ],
  "import": {
    "functionName": "useTranslations",
    "packagePath": "next-intl",
    "statement": ""
  },
  "hook": {
    "variableName": "t",
    "functionName": "useTranslations",
    "statement": "const t = useTranslations();"
  },
  "textReplacement": {
    "format": "{t(\"$KEY\")}"
  }
}

Configuration Options

Project Paths

• srcDir: Path to your React components directory

Languages

• languages: Array of language configurations
  • name: Language code (e.g., "en", "fr")
  • file: Path to the JSON translation file

Translation Import

• import.functionName: Name of the translation function to import
• import.packagePath: Package or path to import from
• import.statement: (Optional) Custom import statement

Translation Hook

• hook.variableName: Variable name for translations (usually "t")
• hook.functionName: Function name to call (should match the imported function)
• hook.statement: (Optional) Custom hook statement

Text Replacement

• textReplacement.format: Format for replacing text nodes (use $KEY as placeholder)

Usage

Run the script:

npx react-translation-wizard

How It Works

• Scanning: The script scans all JSX/TSX files in the specified source directory
• Text Extraction: Identifies all text nodes in the components
• Key Generation: Creates translation keys based on folder and file names
• Translation Files: Updates the primary language file with the extracted text
• Secondary Languages: Adds empty strings for keys in secondary language files
• Code Modification: Replaces text nodes with translation function calls
• Import Handling: Adds necessary imports for the translation function
• Hook Insertion: Adds translation hooks to main component functions

Example

Before:

function MyComponent() {
  return (
    <div>
      <h1>Welcome to our site</h1>
      <p>Please sign in to continue</p>
    </div>
  );
}

After:

import { useTranslation } from "@/utils/translate";

function MyComponent() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t("components.my_component.welcome_to_our_site")}</h1>
      <p>{t("components.my_component.please_sign_in_to_continue")}</p>
    </div>
  );
}

Dependencies

• ts-morph: TypeScript compiler API wrapper
• fs-extra: Enhanced file system methods
• glob: File pattern matching

Created By

⚡⚡ Kashyap Trivedi ⚡⚡