Crate yew

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

• pub use self::prelude::*;

Modules

• callback
  This module contains data types for interacting with Scopes.
• context
  This module defines the ContextProvider component.
• events
  The module that contains all events available in the framework.
• functional
  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.
• html
  The main html module which defines components, listeners, and class helpers.
• macros
  This module contains macros which implements html! macro and JSX-like templates
• platform
  Yew’s compatibility between JavaScript Runtime and Native Runtimes.
• prelude
  The Yew Prelude
• scheduler
  This module contains a scheduler.
• suspense
  This module provides suspense support.
• utils
  This module contains useful utilities to get information about the current document.
• virtual_dom
  This module contains Yew’s implementation of a reactive virtual DOM.

Macros

• classes
  This macro provides a convenient way to create Classes.
• html
  This macro implements JSX-like templates.
• html_nested
  This macro is similar to html!, but preserves the component type instead of wrapping it in Html.
• props
  Build Properties outside of the html! macro.

Structs

• AppHandlecsr
  An instance of an application.
• LocalServerRendererssr
  A Yew Server-side Renderer that renders on the current thread.
• Renderercsr
  The Yew Renderer.
• ServerRendererssr
  A Yew Server-side Renderer.

Functions

• set_custom_panic_hookcsr
  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.