You are currently viewing the docs for Dioxus 0.4.3 which is no longer maintained.

Internationalization

If you application supports multiple languages, the Dioxus-std crate contains helpers to make working with translations in your application easier.

The full code for internationalization

src/i18n.rs
use dioxus::prelude::*;
use dioxus_std::i18n::*;
use dioxus_std::translate;
use std::str::FromStr;

fn main() {
    dioxus_web::launch(app);
}

static EN_US: &str = r#"{
    "id": "en-US",
    "texts": {
        "messages": {
            "hello_world": "Hello World!"
        },
        "messages.hello": "Hello {name}"
    }
}"#;
static ES_ES: &str = r#"{
    "id": "es-ES",
    "texts": {
        "messages": {
            "hello_world": "Hola Mundo!"
        },
        "messages.hello": "Hola {name}"
    }
}"#;

#[allow(non_snake_case)]
fn Body(cx: Scope) -> Element {
    let i18 = use_i18(cx);

    let change_to_english = move |_| i18.set_language("en-US".parse().unwrap());
    let change_to_spanish = move |_| i18.set_language("es-ES".parse().unwrap());

    render!(
        button {
            onclick: change_to_english,
            label {
                "English"
            }
        }
        button {
            onclick: change_to_spanish,
            label {
                "Spanish"
            }
        }
        p { translate!(i18, "messages.hello_world") }
        p { translate!(i18, "messages.hello", name: "Dioxus")  }
    )
}

fn app(cx: Scope) -> Element {
    use_init_i18n(
        cx,
        "en-US".parse().unwrap(),
        "en-US".parse().unwrap(),
        || {
            let en_us = Language::from_str(EN_US).unwrap();
            let es_es = Language::from_str(ES_ES).unwrap();
            vec![en_us, es_es]
        },
    );

    render!(Body {})
}