7e2542cbf8
* Add basic lints to the HTML macro. * f * Fix the examples. * Fix nightly warning message tests. * apply code review suggestions * update error message * rebase onto master * remove unused props * remove console log * remove js void * fix according to PR comments Co-authored-by: Julius Lungys <32368314+voidpumpkin@users.noreply.github.com>
Yew Examples
How to run
The examples are built with trunk. You can install it with the following command:
# at some point in the future, trunk will automatically download wasm-bindgen
cargo install trunk wasm-bindgen-cli
Running an example is as easy as running a single command:
# move into the directory of the example you want to run
# In this case it's the todomvc example
cd examples/todomvc
# build and serve the example
trunk serve --release
We're also publicly hosting the examples at https://examples.yew.rs/<EXAMPLE>.
As an example, check out the TodoMVC example here: https://examples.yew.rs/todomvc
List of examples
| Example | Description |
|---|---|
| boids | Yew port of Boids |
| counter | Simple counter which can be incremented and decremented |
| dyn_create_destroy_apps | Uses the function start_app_in_element and the AppHandle struct to dynamically create and delete Yew apps |
| file_upload | Uses the gloo::file to read the content of user uploaded files |
| function_todomvc | Implementation of TodoMVC using function components and hooks. |
| futures | Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer. |
| game_of_life | Implementation of Conway's Game of Life |
| inner_html | Embeds an external document as raw HTML by manually managing the element |
| js_callback | Interacts with JavaScript code |
| keyed_list | Demonstrates how to use keys to improve the performance of lists |
| mount_point | Shows how to mount the root component to a custom element |
| multi_thread | Demonstrates the use of Web Workers to offload computation to the background |
| nested_list | Renders a styled list which tracks hover events |
| node_refs | Uses a NodeRef to focus the input element under the cursor |
| password_strength | A password strength estimator implemented in Yew |
| pub_sub | Cross-component communication using Agents |
| router | The best yew blog built with yew-router |
| store | Showcases the yewtil::store API |
| timer | Demonstrates the use of the interval and timeout services |
| todomvc | Implementation of TodoMVC |
| two_apps | Runs two separate Yew apps which can communicate with each other |
| webgl | Controls a WebGL canvas from Yew |
Next steps
Have a look at Yew's starter templates when starting a project using Yew – they can significantly simplify things.
Help out
If one of the examples catches your interest, look for the "improvements" section in its README file.
Most examples list a few ideas for how to improve them.
Consider starting with those but don't hesitate to improve an example in other ways either.
One problem that currently plagues most examples is the lack of styling. Please help us make the examples look as flashy as possible!