#[function_component]

#[function_component(_)] turns a normal Rust function into a function component. Functions with the attribute have to return Html and may take a single parameter for the type of props the component should accept. The parameter type needs to be a reference to a Properties type (ex. props: &MyProps). If the function doesn’t have any parameters the resulting component doesn’t accept any props.

The attribute doesn’t replace your original function with a component. You need to provide a name as an input to the attribute which will be the identifier of the component. Assuming you have a function called chat_container and you add the attribute #[function_component(ChatContainer)] you can use the component like this:

  1. use yew::{function_component, html, Html};
  3. #[function_component(ChatContainer)]
  4. pub fn chat_container() -> Html {
  5.     html! {
  6.         // chat container impl
  7.     }
  8. }
  10. html! {
  11.     <ChatContainer />
  12. };

Example

  • With props
  • Without props
  1. use yew::{function_component, html, Properties};
  3. #[derive(Properties, PartialEq)]
  4. pub struct RenderedAtProps {
  5.     pub time: String,
  6. }
  8. #[function_component(RenderedAt)]
  9. pub fn rendered_at(props: &RenderedAtProps) -> Html {
  10.     html! {
  11.         <p>
  12.             <b>{ "Rendered at: " }</b>
  13.             { &props.time }
  14.         </p>
  15.     }
  16. }
  1. use yew::{function_component, html, use_state, Callback};
  3. #[function_component(App)]
  4. fn app() -> Html {
  5.     let counter = use_state(|| 0);
  7.     let onclick = {
  8.         let counter = counter.clone();
  9.         Callback::from(move |_| counter.set(*counter + 1))
  10.     };
  12.     html! {
  13.         <div>
  14.             <button {onclick}>{ "Increment value" }</button>
  15.             <p>
  16.                 <b>{ "Current value: " }</b>
  17.                 { *counter }
  18.             </p>
  19.         </div>
  20.     }
  21. }

Generic function components

The #[function_component(_)] attribute also works with generic functions for creating generic components.

my_generic_component.rs

  1. use std::fmt::Display;
  2. use yew::{function_component, html, Properties};
  4. #[derive(Properties, PartialEq)]
  5. pub struct Props<T>
  6. where
  7.     T: PartialEq,
  8. {
  9.     data: T,
  10. }
  12. #[function_component(MyGenericComponent)]
  13. pub fn my_generic_component<T>(props: &Props<T>) -> Html
  14. where
  15.     T: PartialEq + Display,
  16. {
  17.     html! {
  18.         <p>
  19.             { &props.data }
  20.         </p>
  21.     }
  22. }
  24. // used like this
  25. html! {
  26.     <MyGenericComponent<i32> data=123 />
  27. };
  29. // or
  30. html! {
  31.     <MyGenericComponent<String> data={"foo".to_string()} />
  32. };