4. Yew Integration

Chapter 4: Yew Integration

Complete guide to using telegram-webapp-sdk with Yew framework.

Setup

[dependencies]
telegram-webapp-sdk = { version = "0.3", features = ["yew", "macros"] }
yew = "0.21"

Context Hook

The use_telegram_context() hook provides reactive access to Telegram context:

use telegram_webapp_sdk::use_telegram_context;
use yew::prelude::*;

#[function_component(Profile)]
fn profile() -> Html {
    let ctx = use_telegram_context();

    match ctx {
        Some(telegram_ctx) => {
            if let Some(user) = &telegram_ctx.init_data.user {
                html! {
                    <div>
                        <h1>{ &user.first_name }</h1>
                        <p>{ format!("ID: {}", user.id) }</p>
                    </div>
                }
            } else {
                html! { <p>{ "No user data" }</p> }
            }
        }
        None => html! { <p>{ "Loading Telegram context..." }</p> }
    }
}

Routing with Macros

use telegram_webapp_sdk::{telegram_app, telegram_page, telegram_router};
use yew::prelude::*;

#[telegram_page(path = "/")]
#[function_component(Home)]
fn home() -> Html {
    html! { <h1>{ "Home" }</h1> }
}

#[telegram_page(path = "/profile")]
#[function_component(Profile)]
fn profile() -> Html {
    html! { <h1>{ "Profile" }</h1> }
}

#[telegram_app(auto_init)]
#[function_component(App)]
fn app() -> Html {
    telegram_router! {
        "/" => Home,
        "/profile" => Profile,
    }
}

BottomButton Component

Declarative bottom button:

use telegram_webapp_sdk::yew::BottomButton;
use yew::prelude::*;

#[function_component(Checkout)]
fn checkout() -> Html {
    let onclick = Callback::from(|_| {
        // Handle checkout
        web_sys::console::log_1(&"Checkout clicked".into());
    });

    html! {
        <>
            <h1>{ "Cart" }</h1>
            <BottomButton
                text="Checkout - $50.00"
                {onclick}
                color="#00CC00"
            />
        </>
    }
}

Accessing WebApp API

use telegram_webapp_sdk::TelegramWebApp;
use yew::prelude::*;

#[function_component(Example)]
fn example() -> Html {
    let webapp = TelegramWebApp::new();

    let show_alert = {
        let webapp = webapp.clone();
        Callback::from(move |_| {
            webapp.show_alert("Hello from Yew!");
        })
    };

    html! {
        <button onclick={show_alert}>{ "Show Alert" }</button>
    }
}

Theme Integration

use telegram_webapp_sdk::TelegramWebApp;
use yew::prelude::*;

#[function_component(ThemedApp)]
fn themed_app() -> Html {
    let webapp = TelegramWebApp::new();
    let theme = webapp.theme_params();

    let style = theme.bg_color
        .as_ref()
        .map(|c| format!("background-color: {}", c))
        .unwrap_or_default();

    html! {
        <div {style}>
            <h1>{ "Themed Content" }</h1>
        </div>
    }
}

→ Next: Chapter 5 - Leptos Integration