Crate yew

source ·
Expand description

Yew Framework - API Documentation

Yew is a modern Rust framework for creating multi-threaded front-end web apps using WebAssembly

  • Features a macro for declaring interactive HTML with Rust expressions. Developers who have experience using JSX in React should feel quite at home when using Yew.
  • Achieves high performance by minimizing DOM API calls for each page render and by making it easy to offload processing to background web workers.
  • Supports JavaScript interoperability, allowing developers to leverage NPM packages and integrate with existing JavaScript applications.

Supported Targets (Client-Side Rendering)

  • wasm32-unknown-unknown

Note

Server-Side Rendering should work on all targets when feature ssr is enabled.

Supported Features:

  • csr: Enables Client-side Rendering support and Renderer. Only enable this feature if you are making a Yew application (not a library).
  • ssr: Enables Server-side Rendering support and ServerRenderer.
  • hydration: Enables Hydration support.

Example

use yew::prelude::*;

enum Msg {
    AddOne,
}

struct App {
    value: i64,
}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self { value: 0 }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::AddOne => {
                self.value += 1;
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <div>
                <button onclick={ctx.link().callback(|_| Msg::AddOne)}>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

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

Re-exports

Modules

  • This module contains data types for interacting with Scopes.
  • This module defines the ContextProvider component.
  • The module that contains all events available in the framework.
  • Function components are a simplified version of normal components. They consist of a single function annotated with the attribute #[function_component] that receives props and determines what should be rendered by returning Html.
  • The main html module which defines components, listeners, and class helpers.
  • This module contains macros which implements html! macro and JSX-like templates
  • Yew’s compatibility between JavaScript Runtime and Native Runtimes.
  • The Yew Prelude
  • This module contains a scheduler.
  • This module provides suspense support.
  • This module contains useful utilities to get information about the current document.
  • This module contains Yew’s implementation of a reactive virtual DOM.

Macros

Structs

Functions

  • Set a custom panic hook. Unless a panic hook is set through this function, Yew will overwrite any existing panic hook when an application is rendered with Renderer.