Expand description
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.
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().append_all([
label()
.attr("style", "font-weight: bold;")
.text("a button: "),
button().text("click").onclick(|_| {
window().alert_with_message("hello").unwrap();
}),
]),
)
.append(comp::<OtherComponent>())
.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
use yew_utils::components::drop_down::{DropDown,DropDownProps};
use yew_utils::vdom::*;
use yew::prelude::*;
comp_with::<DropDown<&'static str>>(DropDownProps {
initial: "item 1",
options: vec!["item 1", "item 2", "item 3"],
selection_changed: Callback::from(move |sel: &'static str| {
gloo_utils::window()
.alert_with_message(&format!("got selection: {sel:?}"))
.unwrap();
}),
})Table
use yew_utils::components::table::Table;
use yew_utils::vdom::*;
use yew::prelude::*;
let columns = Children::new(
["col1", "col2"].map(|ea| text(ea).to_vnode()).to_vec(),
);
let data = 0..5;
let rows = data
.into_iter()
.map(|data| {
tr().key(data.to_string())
.append_all([
td().text(data.to_string()),
td().text(format!("{data} (col2)")),
])
.to_vnode()
})
.collect::<Vec<_>>();
let table = Table::render(columns, yew::Children::new(rows));features
yew-router
Not enabled by default.
Will enable the vdom function yew_utils::vdom::yew_link(to: impl yew_router::Routable). It is /not/ enabled by default.
mui-css
Not enabled by default.
This expects that you load the mui-css CSS and JS, e.g.:
<head>
<link href="//cdn.muicss.com/mui-0.10.3/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-0.10.3/js/mui.js"></script>
</head>
Will replace the yew_utils::components::drop_down::DropDown component with a version that is styled with mui-css, in particular see mui-css dropdowns.