cercis-component 1.2.3

component macro for cercis
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

![cercis-preview](../.github/assets/cercis-preview.png)

Macro for [cercis](https://crates.io/crates/cercis) package

```sh
cargo add cercis
```

> Used only with the [cercis](https://crates.io/crates/cercis) package

# Using examples

For more examples, see [cercis](https://crates.io/crates/cercis)

## Empty component

> all data is transferred to the component by reference

```rust
use cercis::prelude::*;

fn main() {
  let page = rsx!(div {
    MyComponent {}
  });

  // output: <div><h1>my component</h1></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent() -> Element {
    rsx!(h1 { "my component" })
}
```

## Params

Parameters are declared as normal function parameters

```rust
use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {
        text: text
    }
  });

  // output: <div><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: &'a str) -> Element {
    rsx!(p { "{text}" })
}
```

## Option params

If the parameter is an option, then you can omit it when calling the component

```rust
use cercis::prelude::*;

fn main() {
  let text = "Lorem ipsum";

  let page = rsx!(div {
    MyComponent {}
    MyComponent {
        text: text
    }
  });

  // output: <div><p>empty</p><p>Lorem ipsum</p></div>
  println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Option<&'a str>) -> Element {
    let text = text.unwrap_or("empty");

    rsx!(p { "{text}" })
}
```

## Children

the component can accept elements ```example: Element<'a>``` and children if you name the variable ```children: Element<'a>```

> all ```Element``` types are optional

```rust
use cercis::prelude::*;

fn main() {
    let text = "Lorem ipsum";

    let page = rsx!(div {
      MyComponent { span { "children" } }
      MyComponent {
          text: rsx!(p { "{text}" }),

          span { "children" }
      }
      MyComponent { text: rsx!(p { "my text" }) }
    });

    /* output(formatted):
    <div>
        <div class='container'>
            <div></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>Lorem ipsum</p></div>
            <span>children</span>
        </div>
        <div class='container'>
            <div><p>my text</p></div>
        </div>
    </div>
    */
    println!("{}", page.render())
}

#[component]
fn MyComponent<'a>(text: Element<'a>, children: Element<'a>) -> Element {
    rsx!(div {
        class: "container",

        div { text }
        children
    })
}
```

> If you have any problems [create issue](https://github.com/magwoo/cercis/issues)