LanguageToggle

Server-side i18n Demo

Select a language below. A cookie is set and the page reloads — the server detects the cookie and re-renders with translated content.

Language

Hello! 👋

Welcome to the mljr-ui component showcase.

This content is rendered server-side based on your selected language.

Switch languages using the dropdown above. Your preference is saved as a cookie and the page reloads to apply the new locale server-side.

Current locale cookie: en

Client-side Only (localStorage)

Persists in localStorage. Dispatches locale-change event.

Custom Language List

Listening for Changes

Selected: EN

Usage

// 1. Create a ui/i18n context bridge in your app:
//
//    func middleware(next echo.HandlerFunc) echo.HandlerFunc {
//        return func(c echo.Context) error {
//            locale := localeFromCookie(c) // "en", "de", …
//            ctx := i18n.WithLocale(c.Request().Context(), locale)
//            ctx  = i18n.WithT(ctx, myTranslateFunc(locale))
//            // pass ctx to your templ render call
//        }
//    }
//
// 2. Inside any templ component, call i18n.T(ctx, "key"):
//
//    {{ greeting := i18n.T(ctx, "greeting") }}
//    <h1>{ greeting }</h1>
//
// 3. Use SetCookie+Reload to bridge client selection → server cookie:

@actions.LanguageToggle(actions.LanguageToggleProps{
    Default:    "en",
    StorageKey: "ui-locale",
    SetCookie:  true,   // also writes a "locale" cookie
    CookieName: "locale",
    Reload:     true,   // page reload applies new locale server-side
})