Macro consecuit::prelude::cc_tree [−][src]
cc_tree!() { /* proc-macro */ }
Expand description
Macro to let you write UI in JSX style.
This:
cc_tree!( <div> "This is a text node" {format!("hi: {}", name)} <span {html_props().class_name("text-span")}>"This is a text node in a span"</span> <my_component { MyComponentProps { value: 5 } } /> </div> )
expands to:
cc.comp(div, Default::default()) .child(|cc| { cc.comp(text_node, "This is a text node") .comp(text_node, { format!("hi: {}", name) }) .comp(span, html_props().class_name("text-span")) .child(|cc| { cc.comp(text_node, "This is a text node in a span") }) .comp(my_component, MyComponentProps { value: 5 }) })
As you might have figured out from above already:
- Use the name of the component function is the name of the tag.
- Put the props in curly braces beside the tag name.
If there are none, the macro will attempt to use the
Default::default
value (and error if the props doesn’t implement Default). - Use string literal or any
AsRef<str>
type in braces to create text node.
If you use names other than cc
for your Consecuit object, you can specify it as first arg to the macro:
fn my_comp(consecuit_object: ComponentBuilder, _props: ()) -> impl ComponentReturn { cc_tree!(consecuit_object, <div> <my_other_component /> "blah blah" </div> ) }