#yew #wasm #web #lazy #list


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

#287 in WebAssembly

24 downloads per month


172 lines



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!

  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!");
                {format!("This is tag {n}")}
  3. Return the component as InfiniteFor!

    html! {
            // 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:
                height: 100vh;\
                width: 100vw;\
                // use this attribute to switch mode from column to row
                // use this callback to offer Html of the items
                // children is the load sign
                // at the bottom of the page
                    { "This is the end of page\n这里是页面底部" }

👌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


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


~212K SLoC