#yew #list #lazy-evaluation #web #template-engine #web-programming

yew-infinite-for

A list component that scrolls infinitely for Yew

4 releases

0.1.3 Oct 24, 2022
0.1.2 Oct 22, 2022
0.1.1 Oct 22, 2022
0.1.0 Oct 22, 2022

#1086 in WebAssembly

49 downloads per month

MIT/Apache

13KB
172 lines

✨Yew-InfiniteFor.rs✨

中文

Yew-InfiniteFor.rs is a list component that scrolls infinitely for Yew.

🔥What's the highlight🔥

  • It support function_component style!
  • It can smart change how many items render in once by view size.
  • It support row mode and column mode.
  • And, it's easy to use!

📑How to use it?📑

Just 3 Simple steps, do like this:

  1. Get Yew-Canvas.rs!

    #Cargo.toml
    [dependencies]
    yew="0.19"
    yew-infinite-list="..."
    
  2. Create a request Callback in the function_component!

    // This callback accept a Two-tuple:
    // - n: usize: the serial number of the item
    // - ret: Callback<Html>: Html setter of the item
    let request = Callback::from(|(n, ret): (usize, Callback<Html>)| {
        gloo::console::log!("Tag ", n, " rendered!");
        ret.emit(html!(
            <h1>
                {format!("This is tag {n}")}
            </h1>
        ))
    });
    
  3. Return the component as InfiniteFor!

    html! {
        <div
            // You have to be sure `InfiniteFor` can be overflow.
            // Generally this is not a problem in other components.
            // If you plan to put `InfiniteFor` directly in the
            // `body`, you can use a style like this:
            style="\
                height: 100vh;\
                width: 100vw;\
            "
        >
            <InfiniteFor
                // use this attribute to switch mode from column to row
                is_direction_row={true}
                // use this callback to offer Html of the items
                {request}
            >
                // children is the load sign
                // at the bottom of the page
                <h4>
                    { "This is the end of page\n这里是页面底部" }
                </h4>
            </InfiniteFor>
        </div>
    }
    

👌Run Exmple👌

  1. This requires you to set up the Yew.rs development environment in advance, the following is a Trunk packaging example:
  2. cd ./examples/base-use
  3. trunk server

⚖️License⚖️

Yew-InfiniteFor.rs is dual licensed under the MIT license and the Apache License (Version 2.0).

Dependencies

~12MB
~222K SLoC