Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
hamza1311 committed Dec 22, 2021
1 parent 893eb85 commit 7d9014e
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 10 deletions.
33 changes: 26 additions & 7 deletions website/docs/concepts/function-components/attribute.mdx
Expand Up @@ -11,7 +11,26 @@ Functions with the attribute have to return `Html` and may take a single paramet
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.
Just mark the component with the attribute (also aliased as `#[fc]`). The component will be named after the function.

```rust
use yew::{fc, html, Html};

#[fc]
pub fn ChatContainer() -> Html {
html! {
// chat container impl
}
}

html! {
<ChatContainer />
};
```

## Specifying a custom component name

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:

```rust
Expand Down Expand Up @@ -42,8 +61,8 @@ pub struct RenderedAtProps {
pub time: String,
}

#[function_component(RenderedAt)]
pub fn rendered_at(props: &RenderedAtProps) -> Html {
#[function_component]
pub fn RenderedAt(props: &RenderedAtProps) -> Html {
html! {
<p>
<b>{ "Rendered at: " }</b>
Expand All @@ -59,8 +78,8 @@ pub fn rendered_at(props: &RenderedAtProps) -> Html {
```rust
use yew::{function_component, html, use_state, Callback};

#[function_component(App)]
fn app() -> Html {
#[function_component]
fn App() -> Html {
let counter = use_state(|| 0);

let onclick = {
Expand Down Expand Up @@ -99,8 +118,8 @@ where
data: T,
}

#[function_component(MyGenericComponent)]
pub fn my_generic_component<T>(props: &Props<T>) -> Html
#[function_component]
pub fn MyGenericComponent<T>(props: &Props<T>) -> Html
where
T: PartialEq + Display,
{
Expand Down
6 changes: 3 additions & 3 deletions website/docs/concepts/function-components/introduction.mdx
Expand Up @@ -16,10 +16,10 @@ implement the `Component` trait.
The easiest way to create a function component is to add the [`#[function_component]`](./../function-components/attribute.mdx) attribute to a function.

```rust
use yew::{function_component, html};
use yew::{fc, html};

#[function_component(HelloWorld)]
fn hello_world() -> Html {
#[fc]
fn HelloWorld() -> Html {
html! { "Hello world" }
}
```
Expand Down

0 comments on commit 7d9014e

Please sign in to comment.