Components

Basic

Any type that implements Component can be used in the html! macro:

  1. use yew::{Component, Html, html, Context, Properties};
  3. struct MyComponent;
  5. impl Component for MyComponent {
  6.     type Message = ();
  7.     type Properties = ();
  9.     fn create(_ctx: &Context<Self>) -> Self {
  10.         Self
  11.     }
  13.     fn view(&self, _ctx: &Context<Self>) -> Html {
  14.         html! {
  15.             { "This component has no properties!" }
  16.         }
  17.     }
  18. }
  20. #[derive(Clone, PartialEq, Properties)]
  21. struct Props {
  22.     prop1: String,
  23.     prop2: String,
  24. }
  26. struct MyComponentWithProps;
  28. impl Component for MyComponentWithProps {
  29.     type Message = ();
  30.     type Properties = Props;
  32.     fn create(_ctx: &Context<Self>) -> Self {
  33.         Self
  34.     }
  36.     fn view(&self, ctx: &Context<Self>) -> Html {
  37.         html! {
  38.             {
  39.                 format!(
  40.                     "prop1: {} and prop2: {}",
  41.                     ctx.props().prop1,
  42.                     ctx.props().prop2
  43.                 )
  44.             }
  45.         }
  46.     }
  47. }
  49. let props = Props {
  50.     prop1: "Hello".to_owned(),
  51.     prop2: "World".to_owned(),
  52. };
  55. html!{
  56.     <>
  57.         // No properties
  58.         <MyComponent />
  60.         // With Properties
  61.         <MyComponentWithProps prop1="lorem" prop2="ipsum" />
  63.         // With the whole set of props provided at once
  64.         <MyComponentWithProps ..props.clone() />
  66.         // With Properties from a variable and specific values overridden
  67.         <MyComponentWithProps prop2="lorem" ..props />
  68.     </>
  69. };

Nested

Components can be passed children if they have a children field in their Properties.

parent.rs

  1. use yew::{Children, Component, Context, html, Html, Properties};
  3. #[derive(PartialEq, Properties)]
  4. struct Props {
  5.     id: String,
  6.     children: Children,
  7. }
  9. struct Container;
  11. impl Component for Container {
  12.     type Message = ();
  13.     type Properties = Props;
  15.     fn create(_ctx: &Context<Self>) -> Self {
  16.         Self
  17.     }
  19.     fn view(&self, ctx: &Context<Self>) -> Html {
  20.         html! {
  21.             <div id={ctx.props().id.clone()}>
  22.                 { ctx.props().children.clone() }
  23.             </div>
  24.         }
  25.     }
  26. }
  28. html! {
  29.     <Container id="container">
  30.         <h4>{ "Hi" }</h4>
  31.         <div>{ "Hello" }</div>
  32.     </Container>
  33. };

The html! macro allows you to pass a base expression with the ..props syntax instead of specifying each property individually, similar to Rust’s Functional Update Syntax. This base expression must occur after any individual props are passed. When passing a base props expression with a children field, the children passed in the html! macro overwrite the ones already present in the props.

  1. use yew::{Children, Component, Context, html, Html, props, Properties};
  3. #[derive(PartialEq, Properties)]
  4. struct Props {
  5.     id: String,
  6.     children: Children,
  7. }
  9. struct Container;
  11. impl Component for Container {
  12.     type Message = ();
  13.     type Properties = Props;
  15.     fn create(_ctx: &Context<Self>) -> Self {
  16.         Self
  17.     }
  19.     fn view(&self, ctx: &Context<Self>) -> Html {
  20.         html! {
  21.             <div id={ctx.props().id.clone()}>
  22.                 { ctx.props().children.clone() }
  23.             </div>
  24.         }
  25.     }
  26. }
  28. let props = yew::props!(Container::Properties {
  29.     id: "container-2",
  30.     children: Children::default(),
  31. });
  33. html! {
  34.     <Container ..props>
  35.         // props.children will be overwritten with this
  36.         <span>{ "I am a child, as you can see" }</span>
  37.     </Container>
  38. };

Nested Children with Props

Nested component properties can be accessed and mutated if the containing component types its children. In the following example, the List component can wrap ListItem components. For a real world example of this pattern, check out the yew-router source code. For a more advanced example, check out the nested-list example in the main yew repository.

  1. use std::rc::Rc;
  2. use yew::{html, ChildrenWithProps, Component, Context, Html, Properties};
  4. #[derive(Clone, PartialEq, Properties)]
  5. pub struct ListItemProps {
  6.     value: String,
  7. }
  9. pub struct ListItem;
  11. impl Component for ListItem {
  12.     type Message = ();
  13.     type Properties = ListItemProps;
  15.     fn create(_ctx: &Context<Self>) -> Self {
  16.         Self
  17.     }
  19.     fn view(&self, ctx: &Context<Self>) -> Html {
  20.         html! {
  21.             <span>
  22.                 { ctx.props().value.clone() }
  23.             </span>
  24.         }
  25.     }
  26. }
  28. #[derive(PartialEq, Properties)]
  29. pub struct Props {
  30.     pub children: ChildrenWithProps<ListItem>,
  31. }
  33. pub struct List;
  34. impl Component for List {
  35.     type Message = ();
  36.     type Properties = Props;
  38.     fn create(_ctx: &Context<Self>) -> Self {
  39.         Self
  40.     }
  42.     fn view(&self, ctx: &Context<Self>) -> Html {
  43.         html! {{
  44.             for ctx.props().children.iter().map(|mut item| {
  45.                 let mut props = Rc::make_mut(&mut item.props);
  46.                 props.value = format!("item-{}", props.value);
  47.                 item
  48.             })
  49.         }}
  50.     }
  51. }
  52. html! {
  53.     <List>
  54.         <ListItem value="a" />
  55.         <ListItem value="b" />
  56.         <ListItem value="c" />
  57.     </List>
  58. };

Relevant examples