Crate consecuit_html

HTML components for consecuit.

This crate provides components like div, span, table for consecuit.

Basic usage

Also see the docs at consecuit, as it also contain some info on how to use this.

First, import the prelude:

use consecuit_html::prelude::*;

Then you can use the components in the cc_tree! macro with the same structure as HTML:

cc_tree!(
    <div>
        <div>
        </div>
    </div>
    <span>"hello"</span>
)

Props

All components in this crate takes props that can be built with builder pattern.

Start with html_props(), then add your attributes. Like this:

cc_tree!(
    <div {html_props().class_name("container container-box").onclick(click_handler)}>
    </div>
)

String attributes like class_name or href take anything that is Into<Cow<'static, str>>. In the code above, class_name can take "container container-box" because it is &'static str which is Into<Cow<'static, str>>.

Event attributes like onclick or oninput take a Callback. A Callback can be created with Callback::new, like this:

let click_handler = Callback::new(move |ev: web_sys::MouseEvent| {
    web_sys::console::log_1(
        &"You clicked the button!".into()
    );
});

cc_tree!(
    <button {html_props().onclick(click_handler)}>"click me!"</button>
)

Sometimes you may get error about ambigous props. For example, many different components take href. The compiler won’t allow this:

<a {html_props().href("https://example.com")}>"Go to web"</a>

You have to use HtmlProps<(web_sys type of your element)> instead. For example:

<a {HtmlProps::<web_sys::HtmlAnchorElement>::new().href("https://example.com")}>"Go to web"</a>

Reference

To get a reference to the underlying web_sys element, you can use the reference prop.

The reference prop takes a Reference of Option of the element type. For instance, the input tag (<input>) has web_sys::HtmlInputElement as the underlying element. So its reference must be a Reference<Option<web_sys::HtmlInputElement>>.

let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ());
cc_tree!(
    <input {html_props().reference(input_ref)} />
)

The Option inside the reference is guarunteed to be Some after the component rendered atleast once.

You can then use the methods in Reference to do things with the underlying web_sys element.

For example, this read the value of an and set it to empty.

let (cc, input_ref): (_, Reference<Option<web_sys::HtmlInputElement>>) = cc.hook(use_ref, ());
let submit_click_handler = Callback::new(move |_ev| {
    let input_value = input_ref.visit_with(|opt: &Option<web_sys::HtmlInputElement>| {
        // Unwrap the Option<web_sys::HtmlInputElement>
        let inp: &web_sys::HtmlInputElement = opt.as_ref().unwrap();

        // Get the value
        let value = inp.value();

        // Set it to empty
        inp.set_value("");

        value
    }).unwrap();
    web_sys::console::log_1(&format!("The submitted value was: {}", input_value).into());
});

cc_tree!(
    <input {html_props().reference(input_ref)} />
    <button {html_props().onclick(submit_click_handler)}>"submit"</button>
)

Notes

Most of the components and props in this crate are generated by a combination of parsing web_sys’s API and scraping MDN.

Only attributes with a set_ method provided by web_sys are available as props. For example, web_sys has set_class_name, so we have class_name prop.

Most notably missing is styling. web_sys does not have set_style. (it has a more sophisicated system for styling). You have to stick with class names and CSS for now.

Contributions are welcome.

Modules

callback
components
elem
misc_components
prelude