yewstack · Enigo · Jan 15, 2024
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/examples/README.md b/examples/README.md
@@ -35,6 +35,7 @@ As an example, check out the TodoMVC example here: <https://examples.yew.rs/todo
 | [counter_functional](counter_functional)                                                  | [F]  | Simple counter which can be incremented and decremented made using function components.                                             |
 | [dyn_create_destroy_apps](dyn_create_destroy_apps)                                        | [S]  | Uses the function `Renderer::with_root_and_props` and the `AppHandle` struct to dynamically create and delete Yew apps.             |
 | [file_upload](file_upload)                                                                | [S]  | Uses [`gloo::file`](https://docs.rs/gloo-file/latest/gloo_file/index.html) to read the content of user uploaded files.              |
+| [function_delayed_input](function_delayed_input)                                          | [F]  | Demonstrates how to implement a form with delayed input processing.                                                                 |
 | [function_memory_game](function_memory_game)                                              | [F]  | Implementation of [Memory Game](https://github.com/bradlygreen/Memory-Game).                                                        |
 | [function_router](function_router)                                                        | [F]  | Identical to [`router`](router) but using function components.                                                                      |
 | [function_todomvc](function_todomvc)                                                      | [F]  | Implementation of [TodoMVC](http://todomvc.com/) using function components and hooks.                                               |

diff --git a/examples/function_delayed_input/Cargo.toml b/examples/function_delayed_input/Cargo.toml
@@ -0,0 +1,11 @@
+[package]
+name = "function_delayed_input"
+version = "0.1.0"
+authors = ["Ruslan Sibgatullin <info@pudding.pro>"]
+edition = "2021"
+license = "MIT OR Apache-2.0"
+
+[dependencies]
+gloo-timers = "0.3.0"
+web-sys = { version = "0.3.67", features = ["Window"]}
+yew = { path = "../../packages/yew", features = ["csr"] }
diff --git a/examples/function_delayed_input/README.md b/examples/function_delayed_input/README.md
@@ -0,0 +1,18 @@
+# Delayed Input Processing Example
+
+[![Demo](https://img.shields.io/website?label=demo&url=https%3A%2F%2Fexamples.yew.rs%2Ffunction_delayed_input)](https://examples.yew.rs/function_delayed_input)
+
+This is a demonstration of how to create an input form with delayed input processing.
+
+A typical use case is to send user input to the backend only when they have stopped typing, rather than on every keystroke.
+
+## Concepts
+- Uses [`gloo-timers`](https://crates.io/crates/gloo-timers) to delay the processing
+
+## Running
+
+Run this application with the trunk development server:
+
+```bash
+trunk serve --open
+```
diff --git a/examples/function_delayed_input/index.html b/examples/function_delayed_input/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1"/>
+    <title>Yew • Function Delayed Input</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link data-trunk rel="rust"/>
+</head>
+<body></body>
+</html>
diff --git a/examples/function_delayed_input/src/main.rs b/examples/function_delayed_input/src/main.rs
@@ -0,0 +1,64 @@
+use gloo_timers::callback::Timeout;
+use web_sys::wasm_bindgen::JsCast;
+use web_sys::HtmlInputElement;
+use yew::*;
+
+#[function_component(App)]
+fn app() -> Html {
+    let search = use_state(|| String::new());
+    let response_data = use_state(|| String::new());
+    {
+        let search = search.clone();
+        let response_data = response_data.clone();
+        use_effect_with(search.clone(), move |_| {
+            // here you would typically do a REST call to send the search input to backend
+            // for simplicity sake here we just set back the original input
+            let search = &*search;
+            response_data.set(search.clone())
+        });
+    }
+
+    let timeout_state = use_state(|| None);
+    let search_clone = search.clone();
+    let oninput = Callback::from(move |e: InputEvent| {
+        if let Some(target) = e.target() {
+            let input = target.dyn_into::<HtmlInputElement>().ok();
+            if let Some(input) = input {
+                let value = input.value();
+                if !value.is_empty() {
+                    let prev_timeout = timeout_state.clone();
+                    if prev_timeout.is_some() {
+                        drop(prev_timeout);
+                    }
+                    let search = search_clone.clone();
+                    let timeout = Timeout::new(1_000, move || {
+                        search.set(value);
+                    });
+                    timeout_state.set(Some(timeout));
+                }
+            }
+        }
+    });
+
+    let response = response_data.clone();
+    let response = &*response;
+    html! {
+      <div class="container p-2">
+          <div class="row">
+            <div class="p-2">
+              <form class="input-group bg-dark border border-white rounded">
+                <input id="search" autocomplete="off" type="search" class="form-control" placeholder="Type something here..." aria-label="Search" {oninput}/>
+              </form>
+            </div>
+            <div class="p-2 border border-black rounded">
+              <p class="mb-0">{"The input value will appear below after a timeout:"}</p>
+              <p>{response.clone()}</p>
+            </div>
+          </div>
+      </div>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}