yew-utils

Yew is a great framework for building WebAssembly frontends with Rust. It's not exactly batteries included, however, and does rely quite a bit on macros. This crate is not an official companion crate, it just assembles a bunch of utilities and components I find convenient.

yew_utils::vdom

The html!{} macro can be convenient but it lacks code completion and typing start/end tags can get old. yew_utils::vdom allows creating yew nodes with simple Rust function calls.

```rust use yew::prelude::; use yew_utils::vdom::; use gloo_utils::window;

[function_component(App)]

fn app() -> Html { div() .append(h1().text("yew-utils vdom example")) .append( form().appendall([ label() .attr("style", "font-weight: bold;") .text("a button: "), button().text("click").onclick(|| { window().alertwithmessage("hello").unwrap(); }), ]), ) .append(comp::()) .into() }

[function_component(OtherComponent)]

pub fn other_component() -> Html { text("hello from other component").into() } ```

yew_utils::components

A set of component. I'll likely add more over time. Currently it includes:

DropDown

```rust use yewutils::components::dropdown::{DropDown,DropDownProps}; use yew_utils::vdom::; use yew::prelude::;

compwith::>(DropDownProps { initial: "item 1", options: vec!["item 1", "item 2", "item 3"], selectionchanged: Callback::from(move |sel: &'static str| { glooutils::window() .alertwith_message(&format!("got selection: {sel:?}")) .unwrap(); }), }) ```

Table

```rust use yewutils::components::table::Table; use yewutils::vdom::; use yew::prelude::;

let columns = Children::new( ["col1", "col2"].map(|ea| text(ea).tovnode()).tovec(), );

let data = 0..5; let rows = data .intoiter() .map(|data| { tr().key(data.tostring()) .appendall([ td().text(data.tostring()), td().text(format!("{data} (col2)")), ]) .to_vnode() }) .collect::>();

let table = Table::render(columns, yew::Children::new(rows)); ```

License: MIT