Components

Basic

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

  1. use yew::html;
  3. html! {
  4.     <>
  5.         // No properties
  6.         <MyComponent />
  8.         // With Properties
  9.         <MyComponent prop1="lorem" prop2="ipsum" />
  11.         // With the whole set of props provided at once
  12.         <MyComponent with props />
  13.     </>
  14. }

Nested

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

parent.rs

  1. use yew::html;
  3. html! {
  4.     <Container id="container">
  5.         <h4>{ "Hi" }</h4>
  6.         <div>{ "Hello" }</div>
  7.     </Container>
  8. }

When using the with props syntax, the children passed in the html! macro overwrite the ones already present in the props.

  1. use yew::{html, props, Children};
  3. let props = yew::props!(Container::Properties {
  4.     id: "container-2",
  5.     children: Children::default(),
  6. });
  7. html! {
  8.     <Container with props>
  9.         // props.children will be overwritten with this
  10.         <span>{ "I am a child, as you can see" }</span>
  11.     </Container>
  12. }

Here’s the implementation of Container:

  1. use yew::{html, Children, Component, Html, Properties};
  3. #[derive(Properties, Clone)]
  4. pub struct Props {
  5.     pub id: String,
  6.     pub children: Children,
  7. }
  9. pub struct Container(Props);
  10. impl Component for Container {
  11.     type Properties = Props;
  13.     // ...
  15.     fn view(&self) -> Html {
  16.        html! {
  17.            <div id=self.0.id.clone()>
  18.                { self.0.children.clone() }
  19.            </div>
  20.        }
  21.     }
  22. }

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 yew::html;
  3. html! {
  4.     <List>
  5.         <ListItem value="a" />
  6.         <ListItem value="b" />
  7.         <ListItem value="c" />
  8.     </List>
  9. }
  1. use yew::{html, ChildrenWithProps, Component, Html, Properties};
  3. #[derive(Properties, Clone)]
  4. pub struct Props {
  5.     pub children: ChildrenWithProps<ListItem>,
  6. }
  8. pub struct List(Props);
  9. impl Component for List {
  10.     type Properties = Props;
  12.     // ...
  14.     fn view(&self) -> Html {
  15.         html!{{
  16.             for self.0.children.iter().map(|mut item| {
  17.                 item.props.value = format!("item-{}", item.props.value);
  18.                 item
  19.             })
  20.         }}
  21.     }
  22. }

Relevant examples