LangNext

A simple and lightweight translation wrapper for React applications with CLI support for automatic translation scanning.

Installation

You can install the package either globally or locally:

Global Installation (Recommended)

npm install -g langnext
# or
yarn global add langnext

Then you can use the commands directly:

langnext init
langnext translate

Local Installation

npm install --save-dev langnext
# or
yarn add -D langnext

When installed locally, use the commands with npx or yarn:

npx langnext init
npx langnext translate
# or
yarn langnext init
yarn langnext translate

Features

• Simple React components for translations
• Automatic translation scanning with CLI tool
• Support for dynamic values in translations
• TypeScript support
• Easy language switching through context

Quick Start

1. Initialize the translation setup in your project:

langnext init

2. Wrap your app with the TranslationProvider:

import { TranslationProvider } from "langnext";

function App() {
  return (
    <TranslationProvider languages={["en", "es"]}>
      {/* Your app components */}
    </TranslationProvider>
  );
}

3. Use the TranslateThis component for translations:

import { TranslateThis } from "langnext";

function MyComponent() {
  return <TranslateThis id="welcome">Welcome to our app</TranslateThis>;
}

4. When ready to translate, run:

langnext translate

This will scan your components and generate translations in translation.json.

API

TranslationProvider

Props:

• children: React nodes to wrap
• languages: Array of language codes to support (e.g., ['en', 'es'])

TranslateThis

Props:

• children: Default text to show if translation is missing
• id: Translation key (optional, will use generated ID if not provided)
• values: Object with values to replace in translation (e.g., { name: "John" })

useTranslationContext

Hook to access translation context:

import { useTranslationContext } from "langnext";

function MyComponent() {
  const { currentLanguage, setLanguage, availableLanguages } =
    useTranslationContext();

  return (
    <div>
      <p>Current language: {currentLanguage}</p>
      <select
        value={currentLanguage}
        onChange={(e) => setLanguage(e.target.value)}
      >
        {availableLanguages.map((lang) => (
          <option key={lang} value={lang}>
            {lang}
          </option>
        ))}
      </select>
    </div>
  );
}

CLI Commands

langnext init

Initializes the translation setup in your project:

• Creates an empty translation.json file
• Provides instructions for setup

langnext translate

Scans your React components and generates translations:

• Finds all <TranslateThis> components
• Extracts text content and IDs
• Translates to all languages specified in TranslationProvider
• Saves translations to translation.json

Development

# Install dependencies
npm install

# Build the package
npm run build

License

MIT