Treege Logo
v2.1.0

Command Palette

Search for a command to run...

Multi-Language Support

Treege includes a built-in translation system for multi-language content.

How It Works

Instead of a simple string, provide an object with language codes:

{
  label: {
    en: "What is your name?",
    fr: "Quel est votre nom?",
    es: "¿Cuál es tu nombre?"
  }
}

Basic Example

const multiLangFlow: Flow = {
  nodes: [
    {
      id: "name",
      type: "input",
      data: {
        label: {
          en: "Full Name",
          fr: "Nom complet",
          es: "Nombre completo"
        },
        placeholder: {
          en: "Enter your name",
          fr: "Entrez votre nom",
          es: "Ingrese su nombre"
        },
        inputType: "text",
        required: true
      }
    }
  ],
  edges: []
}

Setting the Locale

const [locale, setLocale] = useState<"en" | "fr" | "es">("en")
 
<TreegeRenderer
  flows={multiLangFlow}
  locale={locale}
  onSubmit={handleSubmit}
/>

Complete Example with Language Switcher

"use client"
 
import { useState } from "react"
import { TreegeRenderer } from "treege/renderer"
 
const languages = [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "es", label: "Español" }
]
 
export default function MultiLanguageForm() {
  const [locale, setLocale] = useState("en")
 
  return (
    <div>
      {/* Language Switcher */}
      <div className="mb-6 flex gap-2">
        {languages.map((lang) => (
          <button
            key={lang.code}
            onClick={() => setLocale(lang.code)}
            className={locale === lang.code ? "active" : ""}
          >
            {lang.label}
          </button>
        ))}
      </div>
 
      {/* Form */}
      <TreegeRenderer
        flows={flow}
        locale={locale}
        onSubmit={handleSubmit}
      />
    </div>
  )
}