Edit Component

Y i18nrs Yew Usage

Adding i18nrs to your Yew project is simple:

1. Make sure your project is set up with Yew. Follow their Getting Started Guide for setup instructions.

2. Add the i18nrs library to your dependencies by including it in your Cargo.toml file:

   cargo add i18nrs --features=yew
   

3. Import the I18nProvider component into your Yew application and wrap it around your app's main component to provide translations.

🛠️ Usage

Follow these steps to integrate i18nrs into your Yew application:

Step 1: Import the Required Components

Import the I18nProvider and any related types into your Yew project:

use yew::prelude::*;
use i18nrs::yew::I18nProvider;
use i18nrs::yew::I18nProviderConfig;
use std::collections::HashMap;

Step 2: Define Translations

Define your translations in a HashMap where keys are language codes (e.g., en, fr), and values are the translation strings in JSON format:

use yew::prelude::*;
use std::collections::HashMap;

#[function_component(App)]
pub fn app() -> Html {
    let translations = HashMap::from([
        ("en", r#"{"greeting": "Hello", "farewell": "Goodbye"}"#),
        ("fr", r#"{"greeting": "Bonjour", "farewell": "Au revoir"}"#),
    ]);
    html! {
    }
}

Step 3: Wrap Your App with the I18nProvider

Wrap your main app component inside the I18nProvider to give it access to the internationalization context:

use yew::prelude::*;
use i18nrs::yew::I18nProvider;
use i18nrs::yew::I18nProviderConfig;
use std::collections::HashMap;

#[function_component(App)]
pub fn app() -> Html {
    let translations = HashMap::from([
        ("en", r#"{"greeting": "Hello", "farewell": "Goodbye"}"#),
        ("fr", r#"{"greeting": "Bonjour", "farewell": "Au revoir"}"#),
    ]);

    let config = I18nProviderConfig {
        translations: translations,
        default_language: "en".to_string(),
        ..Default::default()
    };

    html! {
        <I18nProvider ..config>
            <MainApp />
        </I18nProvider>
    }
}

#[function_component(MainApp)]
pub fn main_app() -> Html {
    html! {
        <h1>{ "Welcome to i18nrs Example!" }</h1>
    }
}

fn main() {
    // yew::Renderer::<App>::new().render();
}

Step 4: Access Translations with the use_translation Hook

Use the use_translation hook to access translation functions within your components:

use yew::prelude::*;
use i18nrs::yew::use_translation;

#[function_component(MainApp)]
pub fn main_app() -> Html {
    let (i18n, set_language) = use_translation();

    let greeting = i18n.t("greeting"); // Retrieves translation for key "greeting"

    html! {
        <div>
            <h1>{ greeting }</h1>
            <button onclick={Callback::from(move |_| set_language.emit("fr".to_string()))}>
                { "Switch to French" }
            </button>
        </div>
    }
}

fn main() {
    // yew::Renderer::<MainApp>::new().render();
}

🔧 Props

I18nProviderConfig Props

Main Props

Behavioral Props

💡 Notes

1. Translation Keys: Use dot-separated keys to organize translations hierarchically, e.g., menu.file.open. Translation files use a JSON format and can include nested keys for better organization.

   • Example:

     {
       "menu": {
         "file": {
           "open": "Open",
           "save": "Save"
         },
         "edit": "Edit"
       }
     }
     

2. Language Switching: The set_language callback dynamically updates the language and persists it using the specified storage type.

3. Fallback Mechanism: If a translation is not found for the current language, the default language is used.

Usage

CLI Usage

You can import I18n RS directly into your project to customize and modify it using the opensass cli:

os add i18nrs yew

use dioxus::prelude::*;
use i18nrs::dioxus::I18nProvider;
use std::collections::HashMap;

use dioxus::prelude::*;
use std::collections::HashMap;

fn app() -> Element {
    let translations = HashMap::from([
        ("en", r#"{"greeting": "Hello", "farewell": "Goodbye"}"#),
        ("fr", r#"{"greeting": "Bonjour", "farewell": "Au revoir"}"#),
    ]);

    rsx! {}
}

use dioxus::prelude::*;
use i18nrs::dioxus::I18nProvider;
use i18nrs::StorageType;
use std::collections::HashMap;

fn app() -> Element {
    let translations = HashMap::from([
        ("en", r#"{"greeting": "Hello", "farewell": "Goodbye"}"#),
        ("fr", r#"{"greeting": "Bonjour", "farewell": "Au revoir"}"#),
    ]);

    rsx! {
        I18nProvider {
            translations: translations,
            default_language: "en".to_string(),
            MainApp {}
        }
    }
}

#[component]
fn MainApp() -> Element {
    rsx! {
        h1 { "Welcome to i18nrs Dioxus Example!" }
    }
}

use dioxus::prelude::*;
use i18nrs::dioxus::I18nContext;

#[component]
fn MainApp() -> Element {
    let I18nContext { i18n, set_language } = use_context::<I18nContext>();

    let greeting = i18n().t("greeting");

    rsx! {
        div {
            h1 { "{greeting}" }
            button {
                onclick: move |_| set_language.call("fr".to_string()),
                "Switch to French"
            }
        }
    }
}

os add i18nrs dio