From 3f96db6a7e1e492a8941652682d6395f29645c1f Mon Sep 17 00:00:00 2001
From: Forest Anderson <forestkzanderson@gmail.com>
Date: Tue, 28 Jun 2022 04:57:14 -0400
Subject: [PATCH] Yewprint upgrade 0.19 (#131)

Co-authored-by: Cecile Tonglet <cecile.tonglet@cecton.com>
Co-authored-by: Francois Stephany <francois@tamere.eu>
---
 Cargo.lock                                | 766 ++++++++++++----------
 Cargo.toml                                |   8 +-
 src/button_group.rs                       |  60 +-
 src/buttons.rs                            | 127 ++--
 src/callout.rs                            |  93 +--
 src/card.rs                               |  49 +-
 src/checkbox.rs                           |  73 +--
 src/collapse.rs                           | 111 ++--
 src/control_group.rs                      |  51 +-
 src/divider.rs                            |  45 +-
 src/html_elements.rs                      |  58 +-
 src/html_select.rs                        |  67 +-
 src/icon.rs                               |  93 +--
 src/input_group.rs                        |  73 +--
 src/menu.rs                               | 226 +++----
 src/numeric_input.rs                      | 123 ++--
 src/panel_stack.rs                        | 157 ++---
 src/progress_bar.rs                       |  69 +-
 src/radio.rs                              |  77 +--
 src/radio_group.rs                        | 103 ++-
 src/slider.rs                             | 160 +++--
 src/spinner.rs                            | 117 ++--
 src/switch.rs                             | 133 ++--
 src/tabs.rs                               |  97 ++-
 src/tag.rs                                | 120 ++--
 src/text.rs                               |  56 +-
 src/text_area.rs                          |  57 +-
 src/tree.rs                               | 167 +++--
 yewprint-doc/Cargo.toml                   |  13 +-
 yewprint-doc/src/app.rs                   | 499 +++++++-------
 yewprint-doc/src/button_group/example.rs  |  54 +-
 yewprint-doc/src/button_group/mod.rs      |  58 +-
 yewprint-doc/src/buttons/example.rs       |  41 +-
 yewprint-doc/src/buttons/mod.rs           | 172 +++--
 yewprint-doc/src/callout/example.rs       |  46 +-
 yewprint-doc/src/callout/mod.rs           |  46 +-
 yewprint-doc/src/card/example.rs          |  47 +-
 yewprint-doc/src/card/mod.rs              |  42 +-
 yewprint-doc/src/checkbox/example.rs      |  73 +--
 yewprint-doc/src/checkbox/mod.rs          |  50 +-
 yewprint-doc/src/collapse/example.rs      |  20 +-
 yewprint-doc/src/collapse/mod.rs          |  14 +-
 yewprint-doc/src/control_group/example.rs |  63 +-
 yewprint-doc/src/control_group/mod.rs     |  42 +-
 yewprint-doc/src/divider/example.rs       |  52 +-
 yewprint-doc/src/divider/mod.rs           |  34 +-
 yewprint-doc/src/example.rs               |  82 +--
 yewprint-doc/src/html_select/example.rs   |  33 +-
 yewprint-doc/src/html_select/mod.rs       |  58 +-
 yewprint-doc/src/icon/example.rs          |  27 +-
 yewprint-doc/src/icon/mod.rs              |  14 +-
 yewprint-doc/src/input_group/example.rs   | 132 ++--
 yewprint-doc/src/input_group/mod.rs       |  66 +-
 yewprint-doc/src/lib.rs                   |  25 +-
 yewprint-doc/src/logo.rs                  |  31 +-
 yewprint-doc/src/menu/example.rs          | 112 ++--
 yewprint-doc/src/menu/mod.rs              |  14 +-
 yewprint-doc/src/numeric_input/example.rs |  62 +-
 yewprint-doc/src/numeric_input/mod.rs     |  74 +--
 yewprint-doc/src/panel_stack/example.rs   |  95 +--
 yewprint-doc/src/panel_stack/mod.rs       |  20 +-
 yewprint-doc/src/progress_bar/example.rs  |  40 +-
 yewprint-doc/src/progress_bar/mod.rs      |  46 +-
 yewprint-doc/src/radio/example.rs         |  57 +-
 yewprint-doc/src/radio/mod.rs             |  50 +-
 yewprint-doc/src/slider/example.rs        |  61 +-
 yewprint-doc/src/slider/mod.rs            |  40 +-
 yewprint-doc/src/spinner/example.rs       |  43 +-
 yewprint-doc/src/spinner/mod.rs           |  36 +-
 yewprint-doc/src/switch/example.rs        |  98 +--
 yewprint-doc/src/switch/mod.rs            |  58 +-
 yewprint-doc/src/tabs/example.rs          |  31 +-
 yewprint-doc/src/tabs/mod.rs              |  42 +-
 yewprint-doc/src/tag/example.rs           |  53 +-
 yewprint-doc/src/tag/mod.rs               | 120 ++--
 yewprint-doc/src/text/example.rs          |  41 +-
 yewprint-doc/src/text/mod.rs              |  50 +-
 yewprint-doc/src/text_area/example.rs     |  45 +-
 yewprint-doc/src/text_area/mod.rs         |  54 +-
 yewprint-doc/src/tree/example.rs          |  24 +-
 yewprint-doc/src/tree/mod.rs              |  14 +-
 81 files changed, 2726 insertions(+), 3824 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 2bf3ce6..7a909d9 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -19,21 +19,15 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.57"
+version = "1.0.58"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "08f9b8508dccb7687a1d6c4ce66b2b0ecef467c94667de27d8d7fe1f8d2a9cdc"
+checksum = "bb07d2053ccdbe10e2af2995a2f116c1330396493dc1269f6a91d0ae82e19704"
 
 [[package]]
-name = "anymap"
-version = "0.12.1"
+name = "anymap2"
+version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "33954243bd79057c2de7338850b85983a44588021f8a5fee574a8888c6de4344"
-
-[[package]]
-name = "arrayvec"
-version = "0.5.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "23b62fc65de8e4e7f52534fb52b0f3ed04746ae267519eef2a83941e8085068b"
+checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
 
 [[package]]
 name = "atty"
@@ -48,9 +42,9 @@ dependencies = [
 
 [[package]]
 name = "autocfg"
-version = "1.0.1"
+version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cdb031dd78e28731d87d56cc8ffef4a8f36ca26c38fe2de700543e627f8a464a"
+checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
 [[package]]
 name = "base64"
@@ -102,9 +96,9 @@ dependencies = [
 
 [[package]]
 name = "bumpalo"
-version = "3.8.0"
+version = "3.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f1e260c3a9040a7c19a12468758f4c16f31a81a1fe087482be9570ec864bb6c"
+checksum = "37ccbd214614c6783386c1af30caf03192f17891059cecc394b4fb119e363de3"
 
 [[package]]
 name = "byteorder"
@@ -112,17 +106,11 @@ version = "1.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
 
-[[package]]
-name = "bytes"
-version = "1.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c4872d67bab6358e59559027aa3b9157c53d9358c51423c17554809a8858e0f8"
-
 [[package]]
 name = "camino"
-version = "1.0.7"
+version = "1.0.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6f3132262930b0522068049f5870a856ab8affc80c70d08b6ecb785771a6fc23"
+checksum = "869119e97797867fd90f5e22af7d0bd274bd4635ebb9eb68c04f3f513ae6c412"
 dependencies = [
  "serde",
 ]
@@ -151,9 +139,9 @@ dependencies = [
 
 [[package]]
 name = "cc"
-version = "1.0.72"
+version = "1.0.73"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "22a9137b95ea06864e018375b72adfb7db6e6f68cfc8df5a04d00288050485ee"
+checksum = "2fff2a6927b3bb87f9595d67196a70493f627687a71d87a0d692242c33f58c11"
 
 [[package]]
 name = "cfg-if"
@@ -167,12 +155,6 @@ version = "1.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
-[[package]]
-name = "cfg-match"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8100e46ff92eb85bf6dc2930c73f2a4f7176393c84a9446b3d501e1b354e7b34"
-
 [[package]]
 name = "chrono"
 version = "0.4.19"
@@ -194,16 +176,16 @@ checksum = "fff857943da45f546682664a79488be82e69e43c1a7a2307679ab9afb3a66d2e"
 
 [[package]]
 name = "clap"
-version = "3.1.17"
+version = "3.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47582c09be7c8b32c0ab3a6181825ababb713fde6fff20fc573a3870dd45c6a0"
+checksum = "9f1fe12880bae935d142c8702d500c63a4e8634b6c3c57ad72bf978fc7b6249a"
 dependencies = [
  "atty",
  "bitflags",
  "clap_derive",
  "clap_lex",
  "indexmap",
- "lazy_static",
+ "once_cell",
  "strsim",
  "termcolor",
  "textwrap",
@@ -211,9 +193,9 @@ dependencies = [
 
 [[package]]
 name = "clap_derive"
-version = "3.1.7"
+version = "3.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a3aab4734e083b809aaf5794e14e756d1c798d2c69c7f7de7a09a2f5214993c1"
+checksum = "ed6db9e867166a43a53f7199b5e4d1f522a1e5bd626654be263c999ce59df39a"
 dependencies = [
  "heck 0.4.0",
  "proc-macro-error",
@@ -224,9 +206,9 @@ dependencies = [
 
 [[package]]
 name = "clap_lex"
-version = "0.2.0"
+version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a37c35f1112dad5e6e0b1adaff798507497a18fceeb30cceb3bae7d1427b9213"
+checksum = "87eba3c8c7f42ef17f6c659fc7416d0f4758cd3e58861ee63c5fa4a4dde649e4"
 dependencies = [
  "os_str_bytes",
 ]
@@ -243,18 +225,18 @@ dependencies = [
 
 [[package]]
 name = "crc32fast"
-version = "1.2.1"
+version = "1.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "81156fece84ab6a9f2afdb109ce3ae577e42b1228441eded99bd77f627953b1a"
+checksum = "b540bd8bc810d3885c6ea91e2018302f68baba2129ab3e88f32389ee9370880d"
 dependencies = [
  "cfg-if 1.0.0",
 ]
 
 [[package]]
 name = "crossbeam-channel"
-version = "0.5.4"
+version = "0.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5aaa7bd5fb665c6864b5f963dd9097905c54125909c7aa94c9e18507cdbe6c53"
+checksum = "4c02a4d71819009c192cf4872265391563fd6a84c81ff2c0f2a7026ca4c1d85c"
 dependencies = [
  "cfg-if 1.0.0",
  "crossbeam-utils",
@@ -273,26 +255,26 @@ dependencies = [
 
 [[package]]
 name = "crossbeam-epoch"
-version = "0.9.8"
+version = "0.9.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1145cf131a2c6ba0615079ab6a638f7e1973ac9c2634fcbeaaad6114246efe8c"
+checksum = "07db9d94cbd326813772c968ccd25999e5f8ae22f4f8d1b11effa37ef6ce281d"
 dependencies = [
  "autocfg",
  "cfg-if 1.0.0",
  "crossbeam-utils",
- "lazy_static",
  "memoffset",
+ "once_cell",
  "scopeguard",
 ]
 
 [[package]]
 name = "crossbeam-utils"
-version = "0.8.8"
+version = "0.8.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0bf124c720b7686e3c2663cf54062ab0f68a88af2fb6a030e87e30bf721fcb38"
+checksum = "7d82ee10ce34d7bc12c2122495e7593a9c41347ecdd64185af4ecf72cb1a7f83"
 dependencies = [
  "cfg-if 1.0.0",
- "lazy_static",
+ "once_cell",
 ]
 
 [[package]]
@@ -315,10 +297,19 @@ dependencies = [
 ]
 
 [[package]]
-name = "filetime"
-version = "0.2.15"
+name = "fastrand"
+version = "1.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "975ccf83d8d9d0d84682850a38c8169027be83368805971cc4f238c2b245bc98"
+checksum = "c3fcf0cee53519c866c09b5de1f6c56ff9d647101f81c1964fa632e148896cdf"
+dependencies = [
+ "instant",
+]
+
+[[package]]
+name = "filetime"
+version = "0.2.16"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c0408e2626025178a6a7f7ffc05a25bc47103229f19c113755de7bf63816290c"
 dependencies = [
  "cfg-if 1.0.0",
  "libc",
@@ -328,13 +319,11 @@ dependencies = [
 
 [[package]]
 name = "flate2"
-version = "1.0.22"
+version = "1.0.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e6988e897c1c9c485f43b47a529cef42fde0547f9d8d41a7062518f1d8fc53f"
+checksum = "f82b0f4c27ad9f8bfd1f3208d882da2b09c301bc1c828fd3a00d0216d2fbbff6"
 dependencies = [
- "cfg-if 1.0.0",
  "crc32fast",
- "libc",
  "miniz_oxide",
 ]
 
@@ -396,42 +385,88 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3dcaa9ae7725d12cdb85b3ad99a434db70b468c09ded17e012d86b5c1010f7a7"
 
 [[package]]
-name = "getrandom"
-version = "0.2.3"
+name = "futures-channel"
+version = "0.3.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7fcd999463524c52659517fe2cea98493cfe485d10565e7b0fb07dbba7ad2753"
+checksum = "c3083ce4b914124575708913bca19bfe887522d6e2e6d0952943f5eac4a74010"
 dependencies = [
- "cfg-if 1.0.0",
- "libc",
- "wasi",
+ "futures-core",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c09fd04b7e4073ac7156a9539b57a484a8ea920f79c7c675d05d289ab6110d3"
+
+[[package]]
+name = "futures-sink"
+version = "0.3.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21163e139fa306126e6eedaf49ecdb4588f939600f0b1e770f4205ee4b7fa868"
+
+[[package]]
+name = "gloo"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "23947965eee55e3e97a5cd142dd4c10631cc349b48cecca0ed230fd296f568cd"
+dependencies = [
+ "gloo-console",
+ "gloo-dialogs",
+ "gloo-events",
+ "gloo-file",
+ "gloo-render",
+ "gloo-storage",
+ "gloo-timers",
+ "gloo-utils",
 ]
 
 [[package]]
 name = "gloo"
-version = "0.2.1"
+version = "0.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68ce6f2dfa9f57f15b848efa2aade5e1850dc72986b87a2b0752d44ca08f4967"
+checksum = "f96605dc96adaffef27d911a805f0269d83ab89c1076e9c75ebac64a1a27215d"
 dependencies = [
- "gloo-console-timer",
+ "gloo-console",
+ "gloo-dialogs",
  "gloo-events",
  "gloo-file",
+ "gloo-history",
+ "gloo-net",
+ "gloo-render",
+ "gloo-storage",
  "gloo-timers",
+ "gloo-utils",
+ "gloo-worker",
 ]
 
 [[package]]
-name = "gloo-console-timer"
-version = "0.1.0"
+name = "gloo-console"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b48675544b29ac03402c6dffc31a912f716e38d19f7e74b78b7e900ec3c941ea"
+checksum = "3907f786f65bbb4f419e918b0c5674175ef1c231ecda93b2dbd65fd1e8882637"
 dependencies = [
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-dialogs"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67062364ac72d27f08445a46cab428188e2e224ec9e37efdba48ae8c289002e6"
+dependencies = [
+ "wasm-bindgen",
  "web-sys",
 ]
 
 [[package]]
 name = "gloo-events"
-version = "0.1.1"
+version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "088514ec8ef284891c762c88a66b639b3a730134714692ee31829765c5bc814f"
+checksum = "68b107f8abed8105e4182de63845afcc7b69c098b7852a813ea7462a320992fc"
 dependencies = [
  "wasm-bindgen",
  "web-sys",
@@ -439,10 +474,11 @@ dependencies = [
 
 [[package]]
 name = "gloo-file"
-version = "0.1.0"
+version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8f9fecfe46b5dc3cc46f58e98ba580cc714f2c93860796d002eb3527a465ef49"
+checksum = "aa5d6084efa4a2b182ef3a8649cb6506cb4843f22cf907c6e0a799944248ae90"
 dependencies = [
+ "futures-channel",
  "gloo-events",
  "js-sys",
  "wasm-bindgen",
@@ -450,10 +486,83 @@ dependencies = [
 ]
 
 [[package]]
-name = "gloo-timers"
+name = "gloo-history"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f81af52c0d31e86242eecefe1ed4d066deb79cfb80f9f7da0847fac417396bfe"
+dependencies = [
+ "gloo-events",
+ "gloo-utils",
+ "serde",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-net"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2899cb1a13be9020b010967adc6b2a8a343b6f1428b90238c9d53ca24decc6db"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-sink",
+ "gloo-utils",
+ "js-sys",
+ "pin-project",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-render"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2fd9306aef67cfd4449823aadcd14e3958e0800aa2183955a309112a84ec7764"
+dependencies = [
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-storage"
 version = "0.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "47204a46aaff920a1ea58b11d03dec6f704287d27561724a4631e450654a891f"
+checksum = "1caa4ba51c99de680dee3ad99c32ca45e9f13311be72079154d222c3f9a6b6f5"
+dependencies = [
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "serde_json",
+ "thiserror",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "gloo-timers"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5fb7d06c1c8cc2a29bee7ec961009a0b2caa0793ee4900c2ffb348734ba1c8f9"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "gloo-utils"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5c0bbef55e98d946adbd89f3c65a497cf9adb995a73b99573f30180e8813ab21"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -461,10 +570,27 @@ dependencies = [
 ]
 
 [[package]]
-name = "hashbrown"
-version = "0.11.2"
+name = "gloo-worker"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab5ef0d4909ef3724cc8cce6ccc8572c5c817592e9285f5464f8e86f8bd3726e"
+checksum = "7c843b9a46d07485026f030be7bd008580a12a2920fea837745a440a3b0c97cb"
+dependencies = [
+ "anymap2",
+ "bincode",
+ "gloo-console",
+ "gloo-utils",
+ "js-sys",
+ "serde",
+ "slab",
+ "wasm-bindgen",
+ "web-sys",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "db0d4cf898abf0081f964436dc980e96670a0f36863e4b83aaacdb65c9d7ccc3"
 
 [[package]]
 name = "heck"
@@ -490,17 +616,6 @@ dependencies = [
  "libc",
 ]
 
-[[package]]
-name = "http"
-version = "0.2.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1323096b05d41827dadeaee54c9981958c0f94e670bc94ed80037d1a7b8b186b"
-dependencies = [
- "bytes",
- "fnv",
- "itoa",
-]
-
 [[package]]
 name = "humantime"
 version = "2.1.0"
@@ -538,9 +653,9 @@ dependencies = [
 
 [[package]]
 name = "indexmap"
-version = "1.7.0"
+version = "1.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bc633605454125dec4b66843673f01c7df2b89479b32e0ed634e43a91cff62a5"
+checksum = "10a35a97730320ffe8e2d410b5d3b69279b98d2c14bdb8b70ea89ecf7888d41e"
 dependencies = [
  "autocfg",
  "hashbrown",
@@ -566,6 +681,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "instant"
+version = "0.1.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a5bbe824c507c5da5956355e86a746d82e0e1464f65d862cc5e71da70e94b2c"
+dependencies = [
+ "cfg-if 1.0.0",
+]
+
 [[package]]
 name = "iovec"
 version = "0.1.4"
@@ -577,15 +701,15 @@ dependencies = [
 
 [[package]]
 name = "itoa"
-version = "0.4.8"
+version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b71991ff56294aa922b450139ee08b3bfc70982c6b2c7562771375cf73542dd4"
+checksum = "112c678d4050afce233f4f2852bb2eb519230b3cf12f33585275537d7e41578d"
 
 [[package]]
 name = "js-sys"
-version = "0.3.55"
+version = "0.3.58"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7cc9ffccd38c451a86bf13657df244e9c3f37493cce8e5e21e940963777acc84"
+checksum = "c3fac17f7123a73ca62df411b1bf727ccc805daa070338fda671c86dac1bdc27"
 dependencies = [
  "wasm-bindgen",
 ]
@@ -618,24 +742,11 @@ version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "884e2677b40cc8c339eaefcb701c32ef1fd2493d71118dc0ca4b6a736c93bd67"
 
-[[package]]
-name = "lexical-core"
-version = "0.7.6"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6607c62aa161d23d17a9072cc5da0be67cdfc89d3afb1e8d9c842bebc2525ffe"
-dependencies = [
- "arrayvec",
- "bitflags",
- "cfg-if 1.0.0",
- "ryu",
- "static_assertions",
-]
-
 [[package]]
 name = "libc"
-version = "0.2.125"
+version = "0.2.126"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5916d2ae698f6de9bfb891ad7a8d65c09d232dc58cc4ac433c7da3b2fd84bc2b"
+checksum = "349d5a591cd28b49e1d1037471617a32ddcda5731b99419008085f72d5a53836"
 
 [[package]]
 name = "line-wrap"
@@ -669,9 +780,9 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "memchr"
-version = "2.4.1"
+version = "2.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "308cc39be01b73d0d18f82a0e7b2a3df85245f84af96fdddc5d202d27e47b86a"
+checksum = "2dffe52ecf27772e601905b7522cb4ef790d2cc203488bbd0e2fe85fcb74566d"
 
 [[package]]
 name = "memoffset"
@@ -690,12 +801,11 @@ checksum = "8452105ba047068f40ff7093dd1d9da90898e63dd61736462e9cdda6a90ad3c3"
 
 [[package]]
 name = "miniz_oxide"
-version = "0.4.4"
+version = "0.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a92518e98c078586bc6c934028adcca4c92a53d6a958196de835170a01d84e4b"
+checksum = "6f5c75688da582b8ffc1f1799e9db273f32133c49e048f614d22ec3256773ccc"
 dependencies = [
  "adler",
- "autocfg",
 ]
 
 [[package]]
@@ -752,17 +862,6 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
-[[package]]
-name = "nom"
-version = "5.1.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ffb4262d26ed83a1c0a33a38fe2bb15797329c85770da05e6b828ddb782627af"
-dependencies = [
- "lexical-core",
- "memchr",
- "version_check",
-]
-
 [[package]]
 name = "notify"
 version = "4.0.17"
@@ -783,9 +882,9 @@ dependencies = [
 
 [[package]]
 name = "num-integer"
-version = "0.1.44"
+version = "0.1.45"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d2cc698a63b549a70bc047073d2949cce27cd1c7b0a4a862d08a8031bc2801db"
+checksum = "225d3389fb3509a24c93f5c29eb6bde2586b98d9f016636dff58d7c6f7569cd9"
 dependencies = [
  "autocfg",
  "num-traits",
@@ -793,28 +892,37 @@ dependencies = [
 
 [[package]]
 name = "num-traits"
-version = "0.2.14"
+version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a64b1ec5cda2586e284722486d802acf1f7dbdc623e2bfc57e65ca1cd099290"
+checksum = "578ede34cf02f8924ab9447f50c28075b4d3e5b269972345e7e0372b38c6cdcd"
 dependencies = [
  "autocfg",
 ]
 
 [[package]]
 name = "num_cpus"
-version = "1.13.0"
+version = "1.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "05499f3756671c15885fee9034446956fff3f243d6077b91e5767df161f766b3"
+checksum = "19e64526ebdee182341572e50e9ad03965aa510cd94427a4549448f285e957a1"
 dependencies = [
  "hermit-abi",
  "libc",
 ]
 
 [[package]]
-name = "once_cell"
-version = "1.8.0"
+name = "num_threads"
+version = "0.1.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "692fcb63b64b1758029e0a96ee63e049ce8c5948587f2f7208df04625e5f6b56"
+checksum = "2819ce041d2ee131036f4fc9d6ae7ae125a3a40e97ba64d04fe799ad9dabbb44"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "once_cell"
+version = "1.12.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7709cef83f0c1f58f666e746a08b21e0085f7440fa6a29cc194d68aac97a4225"
 
 [[package]]
 name = "onig"
@@ -840,9 +948,9 @@ dependencies = [
 
 [[package]]
 name = "os_str_bytes"
-version = "6.0.0"
+version = "6.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e22443d1643a904602595ba1cd8f7d896afe56d26712531c5ff73a15b2fbf64"
+checksum = "21326818e99cfe6ce1e524c2a805c189a99b5ae555a35d19f9a284b427d86afa"
 
 [[package]]
 name = "percent-encoding"
@@ -851,10 +959,30 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d4fd5641d01c8f18a23da7b6fe29298ff4b55afcccdf78973b24cf3175fee32e"
 
 [[package]]
-name = "pkg-config"
-version = "0.3.22"
+name = "pin-project"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "12295df4f294471248581bc09bef3c38a5e46f1e36d6a37353621a0c6c357e1f"
+checksum = "58ad3879ad3baf4e44784bc6a718a8698867bb991f8ce24d1bcbe2cfb4c3a75e"
+dependencies = [
+ "pin-project-internal",
+]
+
+[[package]]
+name = "pin-project-internal"
+version = "1.0.10"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "744b6f092ba29c3650faf274db506afd39944f48420f6c86b17cfe0ee1cb36bb"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "pkg-config"
+version = "0.3.25"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1df8c4ec4b0627e53bdf214615ad287367e482558cf84b109250b37464dc03ae"
 
 [[package]]
 name = "plist"
@@ -866,16 +994,10 @@ dependencies = [
  "indexmap",
  "line-wrap",
  "serde",
- "time 0.3.5",
+ "time 0.3.11",
  "xml-rs",
 ]
 
-[[package]]
-name = "ppv-lite86"
-version = "0.2.15"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ed0cfbc8191465bed66e1718596ee0b0b35d5ee1f41c5df2189d0fe8bde535ba"
-
 [[package]]
 name = "proc-macro-error"
 version = "1.0.4"
@@ -902,67 +1024,27 @@ dependencies = [
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.32"
+version = "1.0.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba508cc11742c0dc5c1659771673afbab7a0efab23aa17e854cbab0837ed0b43"
+checksum = "dd96a1e8ed2596c337f8eae5f24924ec83f5ad5ab21ea8e455d3566c69fbcaf7"
 dependencies = [
- "unicode-xid",
+ "unicode-ident",
 ]
 
 [[package]]
 name = "quote"
-version = "1.0.10"
+version = "1.0.20"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38bc8cc6a5f2e3655e0899c1b848643b2562f853f114bfec7be120678e3ace05"
+checksum = "3bcdf212e9776fbcb2d23ab029360416bb1706b1aea2d1a5ba002727cbcab804"
 dependencies = [
  "proc-macro2",
 ]
 
-[[package]]
-name = "rand"
-version = "0.8.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2e7573632e6454cf6b99d7aac4ccca54be06da05aca2ef7423d22d27d4d4bcd8"
-dependencies = [
- "libc",
- "rand_chacha",
- "rand_core",
- "rand_hc",
-]
-
-[[package]]
-name = "rand_chacha"
-version = "0.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
-dependencies = [
- "ppv-lite86",
- "rand_core",
-]
-
-[[package]]
-name = "rand_core"
-version = "0.6.3"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d34f1408f55294453790c48b2f1ebbb1c5b4b7563eb1f418bcfcfdbb06ebb4e7"
-dependencies = [
- "getrandom",
-]
-
-[[package]]
-name = "rand_hc"
-version = "0.3.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d51e9f596de227fda2ea6c84607f5558e196eeaf43c986b724ba4fb8fdf497e7"
-dependencies = [
- "rand_core",
-]
-
 [[package]]
 name = "rayon"
-version = "1.5.2"
+version = "1.5.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fd249e82c21598a9a426a4e00dd7adc1d640b22445ec8545feef801d1a74c221"
+checksum = "bd99e5772ead8baa5215278c9b15bf92087709e9c1b2d1f97cdb5a183c933a7d"
 dependencies = [
  "autocfg",
  "crossbeam-deque",
@@ -972,9 +1054,9 @@ dependencies = [
 
 [[package]]
 name = "rayon-core"
-version = "1.9.2"
+version = "1.9.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9f51245e1e62e1f1629cbfec37b5793bbabcaeb90f30e94d2ba03564687353e4"
+checksum = "258bcdb5ac6dad48491bb2992db6b7cf74878b0384908af124823d118c99683f"
 dependencies = [
  "crossbeam-channel",
  "crossbeam-deque",
@@ -984,18 +1066,18 @@ dependencies = [
 
 [[package]]
 name = "redox_syscall"
-version = "0.2.10"
+version = "0.2.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8383f39639269cde97d255a32bdb68c047337295414940c68bdd30c2e13203ff"
+checksum = "62f25bc4c7e55e0b0b7a1d43fb893f4fa1361d0abe38b9ce4f323c2adfe6ef42"
 dependencies = [
  "bitflags",
 ]
 
 [[package]]
 name = "regex"
-version = "1.5.4"
+version = "1.5.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d07a8629359eb56f1e2fb1652bb04212c072a87ba68546a04065d525673ac461"
+checksum = "d83f127d94bdbcda4c8cc2e50f6f84f4b611f69c902699ca385a39c3a75f9ff1"
 dependencies = [
  "aho-corasick",
  "memchr",
@@ -1004,9 +1086,9 @@ dependencies = [
 
 [[package]]
 name = "regex-syntax"
-version = "0.6.25"
+version = "0.6.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f497285884f3fcff424ffc933e56d7cbca511def0c9831a7f9b5f6153e3cc89b"
+checksum = "49b3de9ec5dc0a3417da371aab17d729997c15010e7fd24ff707773a33bddb64"
 
 [[package]]
 name = "remove_dir_all"
@@ -1032,6 +1114,12 @@ dependencies = [
  "winapi 0.3.9",
 ]
 
+[[package]]
+name = "route-recognizer"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "afab94fb28594581f62d981211a9a4d53cc8130bbcbbb89a0440d9b8e81a7746"
+
 [[package]]
 name = "rustc-demangle"
 version = "0.1.21"
@@ -1052,9 +1140,9 @@ dependencies = [
 
 [[package]]
 name = "ryu"
-version = "1.0.5"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "71d301d4193d031abdd79ff7e3dd721168a9572ef3fe51a1517aba235bd8f86e"
+checksum = "f3f6f92acf49d1b98f7a81226834412ada05458b7364277387724a237f062695"
 
 [[package]]
 name = "safe-lock"
@@ -1064,36 +1152,36 @@ checksum = "077d73db7973cccf63eb4aff1e5a34dc2459baa867512088269ea5f2f4253c90"
 
 [[package]]
 name = "safe-proc-macro2"
-version = "1.0.24"
+version = "1.0.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c9ca0693867c373d726819a6655d3dc4e88028905f1b1e9b9d399a57ea1d83e"
+checksum = "814c536dcd27acf03296c618dab7ad62d28e70abd7ba41d3f34a2ce707a2c666"
 dependencies = [
  "unicode-xid",
 ]
 
 [[package]]
 name = "safe-quote"
-version = "1.0.9"
+version = "1.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "566c55c34afcf23f8ae1170373f925201163ed0a9fd315274f35eab6d660b56d"
+checksum = "77e530f7831f3feafcd5f1aae406ac205dd998436b4007c8e80f03eca78a88f7"
 dependencies = [
  "safe-proc-macro2",
 ]
 
 [[package]]
 name = "safe-regex"
-version = "0.2.4"
+version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "954950893b0d83c719cb5325bf3941bae7b1c6590d923c70f78bdfed101179b5"
+checksum = "a15289bf322e0673d52756a18194167f2378ec1a15fe884af6e2d2cb934822b0"
 dependencies = [
  "safe-regex-macro",
 ]
 
 [[package]]
 name = "safe-regex-compiler"
-version = "0.2.4"
+version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "77be88a67af0852122737d6944cf6cf3b493051ac063b074d11d6dc3aaa57047"
+checksum = "fba76fae590a2aa665279deb1f57b5098cbace01a0c5e60e262fcf55f7c51542"
 dependencies = [
  "safe-proc-macro2",
  "safe-quote",
@@ -1101,9 +1189,9 @@ dependencies = [
 
 [[package]]
 name = "safe-regex-macro"
-version = "0.2.3"
+version = "0.2.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f9276d04505a852d89fab9b9d5d72b47e84c726b121f4b8b212b44fba990485d"
+checksum = "96c2e96b5c03f158d1b16ba79af515137795f4ad4e8de3f790518aae91f1d127"
 dependencies = [
  "safe-proc-macro2",
  "safe-regex-compiler",
@@ -1124,6 +1212,12 @@ dependencies = [
  "winapi-util",
 ]
 
+[[package]]
+name = "scoped-tls-hkt"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c2e9d7eaddb227e8fbaaa71136ae0e1e913ca159b86c7da82f3e8f0044ad3a63"
+
 [[package]]
 name = "scopeguard"
 version = "1.1.0"
@@ -1142,27 +1236,39 @@ dependencies = [
 
 [[package]]
 name = "semver"
-version = "1.0.9"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8cb243bdfdb5936c8dc3c45762a19d12ab4550cdc753bc247637d4ec35a040fd"
+checksum = "a41d061efea015927ac527063765e73601444cdc344ba855bc7bd44578b25e1c"
 dependencies = [
  "serde",
 ]
 
 [[package]]
 name = "serde"
-version = "1.0.130"
+version = "1.0.137"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f12d06de37cf59146fbdecab66aa99f9fe4f78722e3607577a5375d66bd0c913"
+checksum = "61ea8d54c77f8315140a05f4c7237403bf38b72704d031543aa1d16abbf517d1"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
-name = "serde_derive"
-version = "1.0.130"
+name = "serde-wasm-bindgen"
+version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d7bc1a1ab1961464eae040d96713baa5a724a8152c1222492465b54322ec508b"
+checksum = "618365e8e586c22123d692b72a7d791d5ee697817b65a218cdf12a98870af0f7"
+dependencies = [
+ "fnv",
+ "js-sys",
+ "serde",
+ "wasm-bindgen",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.137"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1f26faba0c3959972377d3b2d306ee9f71faee9714294e41bb777f83f88578be"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1171,9 +1277,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.71"
+version = "1.0.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "063bf466a64011ac24040a49009724ee60a57da1b437617ceb32e53ad61bfb19"
+checksum = "9b7ce2b32a1aed03c558dc61a5cd328f15aff2dbc17daad8fb8af04d2100e15c"
 dependencies = [
  "itoa",
  "ryu",
@@ -1181,10 +1287,22 @@ dependencies = [
 ]
 
 [[package]]
-name = "slab"
-version = "0.4.5"
+name = "serde_urlencoded"
+version = "0.7.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9def91fd1e018fe007022791f865d0ccc9b3a0d5001e01aabb8b40e46000afb5"
+checksum = "d3491c14715ca2294c4d6a88f15e84739788c1d030eed8c110436aafdaa2f3fd"
+dependencies = [
+ "form_urlencoded",
+ "itoa",
+ "ryu",
+ "serde",
+]
+
+[[package]]
+name = "slab"
+version = "0.4.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eb703cfe953bccee95685111adeedb76fabe4e97549a58d16f03ea7b9367bb32"
 
 [[package]]
 name = "snowflake"
@@ -1198,12 +1316,6 @@ version = "0.5.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"
 
-[[package]]
-name = "static_assertions"
-version = "1.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
-
 [[package]]
 name = "strsim"
 version = "0.10.0"
@@ -1212,13 +1324,13 @@ checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
 
 [[package]]
 name = "syn"
-version = "1.0.81"
+version = "1.0.98"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f2afee18b8beb5a596ecb4a2dce128c719b4ba399d34126b9e4396e3f9860966"
+checksum = "c50aef8a904de4c23c788f104b7dddc7d6f79c647c7c8ce4cc8f73eb0ca773dd"
 dependencies = [
  "proc-macro2",
  "quote",
- "unicode-xid",
+ "unicode-ident",
 ]
 
 [[package]]
@@ -1245,9 +1357,9 @@ dependencies = [
 
 [[package]]
 name = "tar"
-version = "0.4.37"
+version = "0.4.38"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d6f5515d3add52e0bbdcad7b83c388bb36ba7b754dda3b5f5bc2d38640cdba5c"
+checksum = "4b55807c0344e1e6c04d7c965f5289c39a8d94ae23ed5c0b57aabac549f871c6"
 dependencies = [
  "filetime",
  "libc",
@@ -1256,13 +1368,13 @@ dependencies = [
 
 [[package]]
 name = "tempfile"
-version = "3.2.0"
+version = "3.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dac1c663cfc93810f88aed9b8941d48cabf856a1b111c29a40439018d870eb22"
+checksum = "5cdb1ef4eaeeaddc8fbd371e5017057064af0911902ef36b39801f67cc6d79e4"
 dependencies = [
  "cfg-if 1.0.0",
+ "fastrand",
  "libc",
- "rand",
  "redox_syscall",
  "remove_dir_all",
  "winapi 0.3.9",
@@ -1285,18 +1397,18 @@ checksum = "b1141d4d61095b28419e22cb0bbf02755f5e54e0526f97f1e3d1d160e60885fb"
 
 [[package]]
 name = "thiserror"
-version = "1.0.30"
+version = "1.0.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "854babe52e4df1653706b98fcfc05843010039b406875930a70e4d9644e5c417"
+checksum = "bd829fe32373d27f76265620b5309d0340cb8550f523c1dda251d6298069069a"
 dependencies = [
  "thiserror-impl",
 ]
 
 [[package]]
 name = "thiserror-impl"
-version = "1.0.30"
+version = "1.0.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "aa32fd3f627f367fe16f893e2597ae3c05020f8bba2666a4e6ea73d377e5714b"
+checksum = "0396bc89e626244658bef819e22d0cc459e795a5ebe878e6ec336d1674a8d79a"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1316,19 +1428,20 @@ dependencies = [
 
 [[package]]
 name = "time"
-version = "0.3.5"
+version = "0.3.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41effe7cfa8af36f439fac33861b66b049edc6f9a32331e2312660529c1c24ad"
+checksum = "72c91f41dcb2f096c05f0873d667dceec1087ce5bcf984ec8ffb19acddbb3217"
 dependencies = [
  "itoa",
  "libc",
+ "num_threads",
 ]
 
 [[package]]
 name = "tinyvec"
-version = "1.5.1"
+version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2c1c1d5a42b6245520c249549ec267180beaffcc0615401ac8e31853d4b6d8d2"
+checksum = "87cc5ceb3875bb20c2890005a4e226a4651264a5c75edb2421b52861a0a0cb50"
 dependencies = [
  "tinyvec_macros",
 ]
@@ -1341,9 +1454,15 @@ checksum = "cda74da7e1a664f795bb1f8a87ec406fb89a02522cf6e50620d016add6dbbf5c"
 
 [[package]]
 name = "unicode-bidi"
-version = "0.3.7"
+version = "0.3.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1a01404663e3db436ed2746d9fefef640d868edae3cceb81c3b8d5732fda678f"
+checksum = "099b7128301d285f79ddd55b9a83d5e6b9e97c92e0ea0daebee7263e932de992"
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5bd2fe26506023ed7b5e1e315add59d6f584c621d037f9368fea9cfb988f368c"
 
 [[package]]
 name = "unicode-normalization"
@@ -1356,15 +1475,15 @@ dependencies = [
 
 [[package]]
 name = "unicode-segmentation"
-version = "1.8.0"
+version = "1.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8895849a949e7845e06bd6dc1aa51731a103c42707010a5b591c0038fb73385b"
+checksum = "7e8820f5d777f6224dc4be3632222971ac30164d4a258d595640799554ebfd99"
 
 [[package]]
 name = "unicode-xid"
-version = "0.2.2"
+version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8ccb82d61f80a663efe1f787a51b16b5a51e3314d6ac365b08639f52387b33f3"
+checksum = "957e51f3646910546462e67d5f7599b9e4fb8acdd304b087a6494730f9eebf04"
 
 [[package]]
 name = "untrusted"
@@ -1405,9 +1524,9 @@ dependencies = [
 
 [[package]]
 name = "version_check"
-version = "0.9.3"
+version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5fecdca9a5291cc2b8dcf7dc02453fee791a280f3743cb0905f8822ae463b3fe"
+checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
 
 [[package]]
 name = "walkdir"
@@ -1455,9 +1574,9 @@ checksum = "1a143597ca7c7793eff794def352d41792a93c481eb1042423ff7ff72ba2c31f"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "27370197c907c55e3f1a9fbe26f44e937fe6451368324e009cba39e139dc08ad"
+checksum = "7c53b543413a17a202f4be280a7e5c62a1c69345f5de525ee64f8cfdbc954994"
 dependencies = [
  "cfg-if 1.0.0",
  "serde",
@@ -1467,9 +1586,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53e04185bfa3a779273da532f5025e33398409573f348985af9a1cbf3774d3f4"
+checksum = "5491a68ab4500fa6b4d726bd67408630c3dbe9c4fe7bda16d5c82a1fd8c7340a"
 dependencies = [
  "bumpalo",
  "lazy_static",
@@ -1482,9 +1601,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-cli-support"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ab11a7bfc3e3d5c075ee93626160b720a1cd9c320a9b932be4fc243dea9ed507"
+checksum = "4016fbd42224de21aab2f009aeaec61067d278a298ba7f8f7f8d40fbffea0822"
 dependencies = [
  "anyhow",
  "base64 0.9.3",
@@ -1506,9 +1625,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-externref-xform"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83f23b0f14e12b08bcf95b75d1896771afbdd0a4167c889d202b81ed7858e3d5"
+checksum = "f33c8e2d3f3b6f6647f982911eb4cb44998c8cca97a4fe7afc99f616ebb33a73"
 dependencies = [
  "anyhow",
  "walrus",
@@ -1516,9 +1635,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.28"
+version = "0.4.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e8d7523cb1f2a4c96c1317ca690031b714a51cc14e05f712446691f413f5d39"
+checksum = "de9a9cec1733468a8c657e57fa2413d2ae2c0129b95e87c5b72b8ace4d13f31f"
 dependencies = [
  "cfg-if 1.0.0",
  "js-sys",
@@ -1528,9 +1647,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "17cae7ff784d7e83a2fe7611cfe766ecf034111b49deb850a3dc7699c08251f5"
+checksum = "c441e177922bc58f1e12c022624b6216378e5febc2f0533e41ba443d505b80aa"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -1538,9 +1657,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99ec0dc7a4756fffc231aab1b9f2f578d23cd391390ab27f952ae0c9b3ece20b"
+checksum = "7d94ac45fcf608c1f45ef53e748d35660f168490c10b23704c7779ab8f5c3048"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -1551,9 +1670,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-multi-value-xform"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4eae02fd62b4954e74bd808ff160b58932b9a208e03a69e5776460655df11ed5"
+checksum = "7015b54357604811162710d5cf274ab85d974fe1e324222dd5b2133afdefe9b9"
 dependencies = [
  "anyhow",
  "walrus",
@@ -1561,15 +1680,15 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d554b7f530dee5964d9a9468d95c1f8b8acae4f282807e7d27d4b03099a46744"
+checksum = "6a89911bd99e5f3659ec4acf9c4d93b0a90fe4a2a11f15328472058edc5261be"
 
 [[package]]
 name = "wasm-bindgen-threads-xform"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d5d14d234eb095de93a856f4740f0f46e57e58f7cb5c303b35ff3e9db189e90"
+checksum = "6961b838d9a9c121ba4a1eea1628014cc759469e3defb42bbac9c5ed0f65be14"
 dependencies = [
  "anyhow",
  "walrus",
@@ -1578,9 +1697,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-wasm-conventions"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0febe9c6944f60dd5d38359ef5ab3eab82e8ac7a6e9b3961e4357d89192db686"
+checksum = "c0a0eca38fe89471f57d6903f3e17e732d2d6f995a7af5b23f27df7fee0f0d18"
 dependencies = [
  "anyhow",
  "walrus",
@@ -1588,9 +1707,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-wasm-interpreter"
-version = "0.2.80"
+version = "0.2.81"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "03e3e00a34cb517890ac55321277286ac5e072f7076ab62eb85d58a781449d24"
+checksum = "0b1c9fb7f71137840932bbb853ef1f83d68c88584b716c9bbae38675c9fb8b86"
 dependencies = [
  "anyhow",
  "log",
@@ -1621,9 +1740,9 @@ dependencies = [
 
 [[package]]
 name = "web-sys"
-version = "0.3.55"
+version = "0.3.58"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38eb105f1c59d9eaa6b5cdc92b859d85b926e82cb2e0945cd0c9259faa6fe9fb"
+checksum = "2fed94beee57daf8dd7d51f2b15dc2bcde92d7a72304cdf662a4371008b71b90"
 dependencies = [
  "js-sys",
  "wasm-bindgen",
@@ -1779,9 +1898,9 @@ dependencies = [
 
 [[package]]
 name = "xattr"
-version = "0.2.2"
+version = "0.2.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "244c3741f4240ef46274860397c7c74e50eb23624996930e484c16679633a54c"
+checksum = "6d1526bbe5aaeb5eb06885f4d987bcdfa5e23187055de9b83fe00156a821fabc"
 dependencies = [
  "libc",
 ]
@@ -1843,26 +1962,17 @@ dependencies = [
 
 [[package]]
 name = "yew"
-version = "0.18.0"
+version = "0.19.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e4d5154faef86dddd2eb333d4755ea5643787d20aca683e58759b0e53351409f"
+checksum = "2a1ccb53e57d3f7d847338cf5758befa811cabe207df07f543c06f502f9998cd"
 dependencies = [
- "anyhow",
- "anymap",
- "bincode",
- "cfg-if 1.0.0",
- "cfg-match",
  "console_error_panic_hook",
- "gloo",
- "http",
+ "gloo 0.4.2",
+ "gloo-utils",
  "indexmap",
  "js-sys",
- "log",
- "ryu",
- "serde",
- "serde_json",
+ "scoped-tls-hkt",
  "slab",
- "thiserror",
  "wasm-bindgen",
  "wasm-bindgen-futures",
  "web-sys",
@@ -1871,12 +1981,13 @@ dependencies = [
 
 [[package]]
 name = "yew-macro"
-version = "0.18.0"
+version = "0.19.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d6e23bfe3dc3933fbe9592d149c9985f3047d08c637a884b9344c21e56e092ef"
+checksum = "5fab79082b556d768d6e21811869c761893f0450e1d550a67892b9bce303b7bb"
 dependencies = [
  "boolinator",
  "lazy_static",
+ "proc-macro-error",
  "proc-macro2",
  "quote",
  "syn",
@@ -1884,57 +1995,46 @@ dependencies = [
 
 [[package]]
 name = "yew-router"
-version = "0.15.0"
+version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "27666236d9597eac9be560e841e415e20ba67020bc8cd081076be178e159c8bc"
+checksum = "155804f6f3aa309f596d5c3fa14486a94e7756f1edd7634569949e401d5099f2"
 dependencies = [
- "cfg-if 1.0.0",
- "cfg-match",
- "gloo",
+ "gloo 0.4.2",
+ "gloo-utils",
  "js-sys",
- "log",
- "nom",
+ "route-recognizer",
  "serde",
- "serde_json",
+ "serde-wasm-bindgen",
+ "serde_urlencoded",
+ "thiserror",
  "wasm-bindgen",
  "web-sys",
  "yew",
  "yew-router-macro",
- "yew-router-route-parser",
 ]
 
 [[package]]
 name = "yew-router-macro"
-version = "0.15.0"
+version = "0.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c0ace2924b7a175e2d1c0e62ee7022a5ad840040dcd52414ce5f410ab322dba"
+checksum = "39049d193b52eaad4ffc80916bf08806d142c90b5edcebd527644de438a7e19a"
 dependencies = [
  "proc-macro2",
  "quote",
  "syn",
- "yew-router-route-parser",
-]
-
-[[package]]
-name = "yew-router-route-parser"
-version = "0.15.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "de4a67208fb46b900af18a7397938b01f379dfc18da34799cfa8347eec715697"
-dependencies = [
- "nom",
 ]
 
 [[package]]
 name = "yewprint"
 version = "0.1.1"
 dependencies = [
+ "gloo 0.6.1",
  "heck 0.3.3",
  "id_tree",
  "regex",
  "wasm-bindgen",
  "web-sys",
  "yew",
- "yewtil",
 ]
 
 [[package]]
@@ -1955,6 +2055,7 @@ version = "0.1.0"
 dependencies = [
  "build-data",
  "console_error_panic_hook",
+ "gloo 0.6.1",
  "syntect",
  "ureq",
  "wasm-bindgen",
@@ -1964,28 +2065,3 @@ dependencies = [
  "yew-router",
  "yewprint",
 ]
-
-[[package]]
-name = "yewtil"
-version = "0.4.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8543663ac49cd613df079282a1d8bdbdebdad6e02bac229f870fd4237b5d9aaa"
-dependencies = [
- "log",
- "wasm-bindgen",
- "wasm-bindgen-futures",
- "web-sys",
- "yew",
- "yewtil-macro",
-]
-
-[[package]]
-name = "yewtil-macro"
-version = "0.3.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1433d8554db0f0a87a38aeea190780c1d5f9570384d99a34ab4de1c51d8eb8f3"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
-]
diff --git a/Cargo.toml b/Cargo.toml
index ff709c7..4290812 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -18,11 +18,13 @@ default = ["tree"]
 tree = ["id_tree"]
 
 [dependencies]
-web-sys = { version = "0.3", features = ["DomRect", "Element"] }
-yew = "0.18"
+web-sys = { version = "0.3", features = ["DomRect", "Element", "Event", "HtmlSelectElement"] }
+# yew = { git = "https://github.com/yewstack/yew", branch = "master" }
+yew = "0.19"
 id_tree = { version = "1.7", optional = true }
-yewtil = { version = "0.4", features = ["pure"] }
 wasm-bindgen = "0.2"
+gloo = "0.6"
+
 
 [build-dependencies]
 regex = { version = "1", default-features = false, features = ["std", "unicode-perl"] }
diff --git a/src/button_group.rs b/src/button_group.rs
index 69e155c..ff559b1 100644
--- a/src/button_group.rs
+++ b/src/button_group.rs
@@ -1,10 +1,5 @@
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct ButtonGroup {
-    props: ButtonGroupProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ButtonGroupProps {
     #[prop_or_default]
@@ -16,49 +11,28 @@ pub struct ButtonGroupProps {
     #[prop_or_default]
     pub large: bool,
     #[prop_or_default]
-    pub style: Option<Cow<'static, str>>,
+    pub style: Option<String>,
     #[prop_or_default]
     pub children: html::Children,
     #[prop_or_default]
     pub class: Classes,
 }
 
-impl Component for ButtonGroup {
-    type Message = ();
-    type Properties = ButtonGroupProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div
-                class=classes!(
-                    "bp3-button-group",
-                    self.props.minimal.then(|| "bp3-minimal"),
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.vertical.then(|| "bp3-vertical"),
-                    self.props.class.clone(),
-                )
-                style=self.props.style.clone()
-            >
-                {self.props.children.clone()}
-            </div>
-        }
+#[function_component(ButtonGroup)]
+pub fn button_group(props: &ButtonGroupProps) -> Html {
+    html! {
+        <div
+            class={classes!(
+                "bp3-button-group",
+                props.minimal.then(|| "bp3-minimal"),
+                props.fill.then(|| "bp3-fill"),
+                props.large.then(|| "bp3-large"),
+                props.vertical.then(|| "bp3-vertical"),
+                props.class.clone(),
+            )}
+            style={props.style.clone()}
+        >
+            {props.children.clone()}
+        </div>
     }
 }
diff --git a/src/buttons.rs b/src/buttons.rs
index 8156df0..a31364a 100644
--- a/src/buttons.rs
+++ b/src/buttons.rs
@@ -1,11 +1,6 @@
 use crate::{Icon, IconName, Intent, Spinner, ICON_SIZE_LARGE};
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct Button {
-    props: ButtonProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ButtonProps {
     #[prop_or_default]
@@ -35,84 +30,62 @@ pub struct ButtonProps {
     #[prop_or_default]
     pub class: Classes,
     #[prop_or_default]
-    pub style: Option<Cow<'static, str>>,
+    pub style: Option<String>,
     #[prop_or_default]
     pub children: html::Children,
 }
 
-impl Component for Button {
-    type Message = ();
-    type Properties = ButtonProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Button { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <button
-                class=classes!(
-                    "bp3-button",
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.minimal.then(|| "bp3-minimal"),
-                    self.props.small.then(|| "bp3-small"),
-                    self.props.outlined.then(|| "bp3-outlined"),
-                    self.props.loading.then(|| "bp3-loading"),
-                    self.props.large.then(|| "bp3-large"),
-                    (self.props.active && !self.props.disabled).then(|| "bp3-active"),
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.intent,
-                    self.props.class.clone(),
-                )
-                style=self.props.style.clone()
-                onclick=(!self.props.disabled).then(|| self.props.onclick.clone())
-            >
-                {
-                    self
-                        .props
-                        .loading
-                        .then(|| html! {
-                            <Spinner
-                                class=classes!("bp3-button-spinner")
-                                size=ICON_SIZE_LARGE as f32
-                            />
-                        })
-                        .unwrap_or_default()
+#[function_component(Button)]
+pub fn button(props: &ButtonProps) -> Html {
+    html! {
+        <button
+            class={classes!(
+                "bp3-button",
+                props.fill.then(|| "bp3-fill"),
+                props.minimal.then(|| "bp3-minimal"),
+                props.small.then(|| "bp3-small"),
+                props.outlined.then(|| "bp3-outlined"),
+                props.loading.then(|| "bp3-loading"),
+                props.large.then(|| "bp3-large"),
+                (props.active && !props.disabled).then(|| "bp3-active"),
+                props.disabled.then(|| "bp3-disabled"),
+                props.intent,
+                props.class.clone(),
+            )}
+            style={props.style.clone()}
+            onclick={(!props.disabled).then(|| props.onclick.clone())}
+        >
+            {
+                props
+                    .loading
+                    .then(|| html! {
+                        <Spinner
+                            class={classes!("bp3-button-spinner")}
+                            size={ICON_SIZE_LARGE as f32}
+                        />
+                    })
+                    .unwrap_or_default()
+            }
+            {
+                if let Some(icon) = props.icon {
+                    html! {
+                        <Icon icon={icon} />
+                    }
+                } else {
+                    html!()
                 }
-                {
-                    if let Some(icon) = self.props.icon {
-                        html! {
-                            <Icon icon=icon />
-                        }
-                    } else {
-                        html!()
+            }
+            {
+                if props.children.is_empty() {
+                    html! ()
+                } else {
+                    html! {
+                        <span class="bp3-button-text">
+                            {for props.children.iter()}
+                        </span>
                     }
                 }
-                {
-                    if self.props.children.is_empty() {
-                        html! ()
-                    } else {
-                        html! {
-                            <span class="bp3-button-text">
-                                {for self.props.children.iter()}
-                            </span>
-                        }
-                    }
-                }
-            </button>
-        }
+            }
+        </button>
     }
 }
diff --git a/src/callout.rs b/src/callout.rs
index a79f15d..59e00a0 100644
--- a/src/callout.rs
+++ b/src/callout.rs
@@ -1,12 +1,7 @@
 use crate::icon::ICON_SIZE_LARGE;
 use crate::{Icon, IconName, Intent};
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct Callout {
-    props: CalloutProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct CalloutProps {
     #[prop_or_default]
@@ -18,63 +13,43 @@ pub struct CalloutProps {
     #[prop_or_default]
     pub intent: Option<Intent>,
     #[prop_or_default]
-    pub title: Option<Cow<'static, str>>,
+    pub title: Option<String>,
     pub children: html::Children,
 }
 
-impl Component for Callout {
-    type Message = ();
-    type Properties = CalloutProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props == props {
-            return false;
-        }
-        self.props = props;
-        true
-    }
-
-    fn view(&self) -> Html {
-        let icon = if self.props.without_icon {
-            None
-        } else {
-            self.props.icon.or_else(|| {
-                self.props.intent.map(|intent| match intent {
-                    Intent::Primary => IconName::InfoSign,
-                    Intent::Success => IconName::Tick,
-                    Intent::Warning => IconName::WarningSign,
-                    Intent::Danger => IconName::Error,
-                })
+#[function_component(Callout)]
+pub fn callout(props: &CalloutProps) -> Html {
+    let icon = if props.without_icon {
+        None
+    } else {
+        props.icon.or_else(|| {
+            props.intent.map(|intent| match intent {
+                Intent::Primary => IconName::InfoSign,
+                Intent::Success => IconName::Tick,
+                Intent::Warning => IconName::WarningSign,
+                Intent::Danger => IconName::Error,
             })
-        };
-        let classes = classes!(
-            self.props.class.clone(),
-            "bp3-callout",
-            icon.map(|_| "bp3-callout-icon"),
-            self.props.intent,
-        );
-        html! {
-            <div class=classes>
-                {
-                    icon.iter()
-                        .map(|name| html!{<Icon icon=*name icon_size=ICON_SIZE_LARGE/>})
-                        .collect::<Html>()
-                }
-                {
-                    self.props.title.iter()
-                        .map(|title| html!{<h4 class={"bp3-heading"}>{title}</h4>})
-                        .collect::<Html>()
-                }
-                { self.props.children.clone() }
-            </div>
-        }
+        })
+    };
+    let classes = classes!(
+        props.class.clone(),
+        "bp3-callout",
+        icon.map(|_| "bp3-callout-icon"),
+        props.intent,
+    );
+    html! {
+        <div class={classes}>
+            {
+                icon.iter()
+                    .map(|name| html!{<Icon icon={*name} icon_size={ICON_SIZE_LARGE}/>})
+                    .collect::<Html>()
+            }
+            {
+                props.title.iter()
+                    .map(|title| html!{<h4 class={"bp3-heading"}>{title}</h4>})
+                    .collect::<Html>()
+            }
+            { props.children.clone() }
+        </div>
     }
 }
diff --git a/src/card.rs b/src/card.rs
index 50c9213..e29b264 100644
--- a/src/card.rs
+++ b/src/card.rs
@@ -14,42 +14,17 @@ pub struct CardProps {
     pub children: html::Children,
 }
 
-pub struct Card {
-    props: CardProps,
-}
-
-impl Component for Card {
-    type Message = ();
-    type Properties = CardProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> bool {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> bool {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div class=classes!(
-                "bp3-card",
-                self.props.class.clone(),
-                self.props.elevation,
-                self.props.interactive.then(|| "bp3-interactive"),
-            )
-            onclick={self.props.onclick.clone()}>
-                {self.props.children.clone()}
-            </div>
-        }
+#[function_component(Card)]
+pub fn card(props: &CardProps) -> Html {
+    html! {
+        <div class={classes!(
+            "bp3-card",
+            props.class.clone(),
+            props.elevation,
+            props.interactive.then(|| "bp3-interactive"),
+        )}
+        onclick={props.onclick.clone()}>
+            {props.children.clone()}
+        </div>
     }
 }
diff --git a/src/checkbox.rs b/src/checkbox.rs
index c8f55a4..75d2a6c 100644
--- a/src/checkbox.rs
+++ b/src/checkbox.rs
@@ -1,11 +1,7 @@
 use yew::prelude::*;
 
-pub struct Checkbox {
-    props: Props,
-}
-
 #[derive(Clone, PartialEq, Properties)]
-pub struct Props {
+pub struct CheckboxProps {
     #[prop_or_default]
     pub disabled: bool,
     #[prop_or_default]
@@ -15,56 +11,35 @@ pub struct Props {
     #[prop_or_default]
     pub checked: bool,
     #[prop_or_default]
-    pub onchange: Callback<ChangeData>,
+    pub onchange: Callback<Event>,
     #[prop_or_default]
     pub label: yew::virtual_dom::VNode,
     #[prop_or_default]
     pub indeterminate_state: bool,
 }
 
-impl Component for Checkbox {
-    type Message = ();
-    type Properties = Props;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <label
-                class=classes!(
-                    "bp3-control", "bp3-checkbox",
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.inline.then(|| "bp3-inline"),
-                    self.props.large.then(|| "bp3-large")
-                )
+#[function_component(Checkbox)]
+pub fn checkbox(props: &CheckboxProps) -> Html {
+    html! {
+        <label
+            class={classes!(
+                "bp3-control", "bp3-checkbox",
+                props.disabled.then(|| "bp3-disabled"),
+                props.inline.then(|| "bp3-inline"),
+                props.large.then(|| "bp3-large")
+            )}
+        >
+            <input
+                type="checkbox"
+                checked={props.checked}
+                onchange={props.onchange.clone()}
+                disabled={props.disabled}
+            />
+            <span
+                class="bp3-control-indicator"
             >
-                <input
-                    type="checkbox"
-                    checked={self.props.checked}
-                    onchange={self.props.onchange.clone()}
-                    disabled=self.props.disabled
-                />
-                <span
-                    class="bp3-control-indicator"
-                >
-                </span>
-                {self.props.label.clone()}
-            </label>
-        }
+            </span>
+            {props.label.clone()}
+        </label>
     }
 }
diff --git a/src/collapse.rs b/src/collapse.rs
index a78ed39..202d00b 100644
--- a/src/collapse.rs
+++ b/src/collapse.rs
@@ -1,7 +1,7 @@
-use std::time::Duration;
+use gloo::timers::callback::Timeout;
+use std::{convert::TryInto, time::Duration};
 use web_sys::Element;
 use yew::prelude::*;
-use yew::services::*;
 
 pub struct Collapse {
     height: Height,
@@ -11,10 +11,7 @@ pub struct Collapse {
     height_when_open: Option<String>,
     animation_state: AnimationState,
     contents_ref: NodeRef,
-    callback_delayed_state_change: Callback<()>,
-    handle_delayed_state_change: Option<Box<dyn Task>>,
-    props: CollapseProps,
-    link: ComponentLink<Self>,
+    handle_delayed_state_change: Option<Timeout>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -52,77 +49,83 @@ impl Component for Collapse {
     type Message = ();
     type Properties = CollapseProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         Collapse {
-            height: if props.is_open {
+            height: if ctx.props().is_open {
                 Height::Auto
             } else {
                 Height::Zero
             },
             overflow_visible: false,
             translated: false,
-            render_children: props.is_open || props.keep_children_mounted,
+            render_children: ctx.props().is_open || ctx.props().keep_children_mounted,
             height_when_open: None,
-            animation_state: if props.is_open {
+            animation_state: if ctx.props().is_open {
                 AnimationState::Open
             } else {
                 AnimationState::Closed
             },
             contents_ref: NodeRef::default(),
-            callback_delayed_state_change: link.callback(|_| ()),
             handle_delayed_state_change: None,
-            props,
-            link,
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            if props.is_open {
-                match self.animation_state {
-                    AnimationState::Open | AnimationState::Opening => {}
-                    _ => {
-                        self.animation_state = AnimationState::OpenStart;
-                        self.render_children = true;
-                        self.translated = false;
-                    }
-                }
-            } else {
-                match self.animation_state {
-                    AnimationState::Closed | AnimationState::Closing => {}
-                    _ => {
-                        self.animation_state = AnimationState::ClosingStart;
-                        self.height = Height::Full;
-                        self.translated = true;
-                    }
+    fn changed(&mut self, ctx: &Context<Self>) -> bool {
+        if ctx.props().is_open {
+            match self.animation_state {
+                AnimationState::Open | AnimationState::Opening => {}
+                _ => {
+                    self.animation_state = AnimationState::OpenStart;
+                    self.render_children = true;
+                    self.translated = false;
                 }
             }
-
-            self.props = props;
-            true
         } else {
-            false
+            match self.animation_state {
+                AnimationState::Closed | AnimationState::Closing => {}
+                _ => {
+                    self.animation_state = AnimationState::ClosingStart;
+                    self.height = Height::Full;
+                    self.translated = true;
+                }
+            }
         }
+
+        true
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, _msg: Self::Message) -> bool {
         match self.animation_state {
             AnimationState::OpenStart => {
+                let link = ctx.link().clone();
                 self.animation_state = AnimationState::Opening;
                 self.height = Height::Full;
-                self.handle_delayed_state_change = Some(Box::new(TimeoutService::spawn(
-                    self.props.transition_duration,
-                    self.callback_delayed_state_change.clone(),
-                )));
+                self.handle_delayed_state_change = Some(Timeout::new(
+                    ctx.props()
+                        .transition_duration
+                        .as_millis()
+                        .try_into()
+                        .unwrap(),
+                    move || {
+                        link.send_message(());
+                    },
+                ));
                 true
             }
             AnimationState::ClosingStart => {
+                let link = ctx.link().clone();
                 self.animation_state = AnimationState::Closing;
                 self.height = Height::Zero;
-                self.handle_delayed_state_change = Some(Box::new(TimeoutService::spawn(
-                    self.props.transition_duration,
-                    self.callback_delayed_state_change.clone(),
-                )));
+                self.handle_delayed_state_change = Some(Timeout::new(
+                    ctx.props()
+                        .transition_duration
+                        .as_millis()
+                        .try_into()
+                        .unwrap(),
+                    move || {
+                        link.send_message(());
+                    },
+                ));
                 true
             }
             AnimationState::Opening => {
@@ -132,7 +135,7 @@ impl Component for Collapse {
             }
             AnimationState::Closing => {
                 self.animation_state = AnimationState::Closed;
-                if !self.props.keep_children_mounted {
+                if !ctx.props().keep_children_mounted {
                     self.render_children = false;
                 }
                 true
@@ -141,19 +144,19 @@ impl Component for Collapse {
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
         if self.render_children {
             let client_height = self.contents_ref.cast::<Element>().unwrap().client_height();
             self.height_when_open = Some(format!("{}px", client_height));
         }
 
         match self.animation_state {
-            AnimationState::OpenStart | AnimationState::ClosingStart => self.link.send_message(()),
+            AnimationState::OpenStart | AnimationState::ClosingStart => ctx.link().send_message(()),
             _ => {}
         }
     }
 
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let mut container_style = String::with_capacity(30);
         match (self.height, self.height_when_open.as_ref()) {
             (Height::Zero, _) => container_style.push_str("height: 0px; "),
@@ -179,19 +182,19 @@ impl Component for Collapse {
         }
 
         html! {
-            <div class=classes!("bp3-collapse") style={container_style}>
+            <div class={classes!("bp3-collapse")} style={container_style}>
                 <div
-                    class=classes!(
+                    class={classes!(
                         "bp3-collapse-body",
-                        self.props.class.clone(),
-                    )
+                        ctx.props().class.clone(),
+                    )}
                     style={content_style}
                     aria-hidden={(!self.render_children).then(|| "true")}
                     ref={self.contents_ref.clone()}
                 >
                     {
                         if self.render_children {
-                            self.props.children.clone()
+                            ctx.props().children.clone()
                         } else {
                             Default::default()
                         }
diff --git a/src/control_group.rs b/src/control_group.rs
index bcf938c..3376ce6 100644
--- a/src/control_group.rs
+++ b/src/control_group.rs
@@ -1,9 +1,5 @@
 use yew::prelude::*;
 
-pub struct ControlGroup {
-    props: ControlGroupProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ControlGroupProps {
     #[prop_or_default]
@@ -18,39 +14,18 @@ pub struct ControlGroupProps {
     pub class: Classes,
 }
 
-impl Component for ControlGroup {
-    type Message = ();
-    type Properties = ControlGroupProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div
-                class=classes!(
-                    "bp3-control-group",
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.vertical.then(|| "bp3-vertical"),
-                    self.props.class.clone(),
-                )
-            >
-                {self.props.children.clone()}
-            </div>
-        }
+#[function_component(ControlGroup)]
+pub fn control_group(props: &ControlGroupProps) -> Html {
+    html! {
+        <div
+            class={classes!(
+                "bp3-control-group",
+                props.fill.then(|| "bp3-fill"),
+                props.vertical.then(|| "bp3-vertical"),
+                props.class.clone(),
+            )}
+        >
+            {props.children.clone()}
+        </div>
     }
 }
diff --git a/src/divider.rs b/src/divider.rs
index ccf37e5..caa8587 100644
--- a/src/divider.rs
+++ b/src/divider.rs
@@ -1,9 +1,5 @@
 use yew::prelude::*;
 
-pub struct Divider {
-    props: DividerProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct DividerProps {
     #[prop_or_default]
@@ -14,36 +10,15 @@ pub struct DividerProps {
     pub class: Classes,
 }
 
-impl Component for Divider {
-    type Message = ();
-    type Properties = DividerProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <span
-                class=classes!(
-                    "bp3-divider",
-                    self.props.vertical.then(|| "bp3-vertical"),
-                    self.props.class.clone(),
-                )
-            />
-        }
+#[function_component(Divider)]
+pub fn view(props: &DividerProps) -> Html {
+    html! {
+        <span
+            class={classes!(
+                "bp3-divider",
+                props.vertical.then(|| "bp3-vertical"),
+                props.class.clone(),
+            )}
+        />
     }
 }
diff --git a/src/html_elements.rs b/src/html_elements.rs
index 218cd21..796cee8 100644
--- a/src/html_elements.rs
+++ b/src/html_elements.rs
@@ -1,40 +1,36 @@
 use yew::prelude::*;
-use yewtil::{Pure, PureComponent};
+
+#[derive(Properties, PartialEq)]
+pub struct ChildrenOnlyProps {
+    #[prop_or_default]
+    pub class: Classes,
+    #[prop_or_default]
+    pub children: html::Children,
+}
 
 macro_rules! build_component {
-    ($name:ident, $props_name:ident, $tag:tt, $class:literal) => {
-        pub type $name = Pure<$props_name>;
-
-        #[derive(Debug, Clone, PartialEq, Properties)]
-        pub struct $props_name {
-            #[prop_or_default]
-            pub class: Classes,
-            #[prop_or_default]
-            pub children: html::Children,
-        }
-
-        impl PureComponent for $props_name {
-            fn render(&self) -> Html {
-                html! {
-                    <$tag class=classes!($class, self.class.clone())>
-                        {self.children.clone()}
-                    </$tag>
-                }
+    ($name:ident, $tag:tt, $class:literal) => {
+        #[function_component($name)]
+        pub fn $tag(props: &ChildrenOnlyProps) -> Html {
+            html! {
+                <$tag class={classes!($class, props.class.clone())}>
+                    { props.children.clone() }
+                </$tag>
             }
         }
     };
 }
 
-build_component!(H1, H1Props, h1, "bp3-heading");
-build_component!(H2, H2Props, h2, "bp3-heading");
-build_component!(H3, H3Props, h3, "bp3-heading");
-build_component!(H4, H4Props, h4, "bp3-heading");
-build_component!(H5, H5Props, h5, "bp3-heading");
-build_component!(H6, H6Props, h6, "bp3-heading");
+build_component!(H1, h1, "bp3-heading");
+build_component!(H2, h2, "bp3-heading");
+build_component!(H3, h3, "bp3-heading");
+build_component!(H4, h4, "bp3-heading");
+build_component!(H5, h5, "bp3-heading");
+build_component!(H6, h6, "bp3-heading");
 
-build_component!(Blockquote, BlockquoteProps, blockquote, "bp3-blockquote");
-build_component!(Code, CodeProps, code, "bp3-code");
-build_component!(Label, LabelProps, label, "bp3-label");
-build_component!(Pre, PreProps, pre, "bp3-pre");
-build_component!(Ol, OlProps, ol, "bp3-ol");
-build_component!(Ul, UlProps, ul, "bp3-ul");
+build_component!(Blockquote, blockquote, "bp3-blockquote");
+build_component!(Code, code, "bp3-code");
+build_component!(Label, label, "bp3-label");
+build_component!(Pre, pre, "bp3-pre");
+build_component!(Ol, ol, "bp3-ol");
+build_component!(Ul, ul, "bp3-ul");
diff --git a/src/html_select.rs b/src/html_select.rs
index 48cfd2e..9bf7fe2 100644
--- a/src/html_select.rs
+++ b/src/html_select.rs
@@ -1,9 +1,11 @@
+use std::marker::PhantomData;
+
 use crate::{Icon, IconName};
+use web_sys::HtmlSelectElement;
 use yew::prelude::*;
 
 pub struct HtmlSelect<T: Clone + PartialEq + 'static> {
-    props: HtmlSelectProps<T>,
-    link: ComponentLink<Self>,
+    phantom: PhantomData<T>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -30,51 +32,44 @@ pub struct HtmlSelectProps<T: Clone + PartialEq + 'static> {
 }
 
 impl<T: Clone + PartialEq + 'static> Component for HtmlSelect<T> {
-    type Message = ChangeData;
+    type Message = Event;
     type Properties = HtmlSelectProps<T>;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { props, link }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
+            phantom: PhantomData,
+        }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        let i = if let ChangeData::Select(select) = msg {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let i = if let Some(select) = msg.target_dyn_into::<HtmlSelectElement>() {
             select.selected_index()
         } else {
-            unreachable!("unexpected ChangeData variant: {:?}", msg);
+            unreachable!("unexpected Event: {:?}", msg);
         };
         if i >= 0 {
             let i = i as usize;
-            let variant = self.props.options[i].0.clone();
-            self.props.onchange.emit(variant);
+            let variant = ctx.props().options[i].0.clone();
+            ctx.props().onchange.emit(variant);
         }
         false
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let option_children = self
-            .props
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let option_children = ctx
+            .props()
             .options
             .iter()
             .map(|(value, label)| {
-                let selected = self
-                    .props
+                let selected = ctx
+                    .props()
                     .value
                     .as_ref()
                     .map(|x| value == x)
                     .unwrap_or_default();
 
                 html! {
-                    <option selected=selected>
+                    <option selected={selected}>
                         {label}
                     </option>
                 }
@@ -83,24 +78,24 @@ impl<T: Clone + PartialEq + 'static> Component for HtmlSelect<T> {
 
         html! {
             <div
-                class=classes!(
+                class={classes!(
                     "bp3-html-select",
-                    self.props.minimal.then(|| "bp3-minimal"),
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.class.clone(),
-                )
+                    ctx.props().minimal.then(|| "bp3-minimal"),
+                    ctx.props().large.then(|| "bp3-large"),
+                    ctx.props().fill.then(|| "bp3-fill"),
+                    ctx.props().disabled.then(|| "bp3-disabled"),
+                    ctx.props().class.clone(),
+                )}
             >
                 <select
-                    disabled=self.props.disabled
-                    onchange={self.link.callback(|x| x)}
-                    title={self.props.title.clone()}
+                    disabled={ctx.props().disabled}
+                    onchange={ctx.link().callback(|x| x)}
+                    title={ctx.props().title.clone()}
                     value={"".to_string()}
                 >
                     {option_children}
                 </select>
-                <Icon icon=IconName::DoubleCaretVertical/>
+                <Icon icon={IconName::DoubleCaretVertical}/>
             </div>
         }
     }
diff --git a/src/icon.rs b/src/icon.rs
index 25a07fb..9a19a27 100644
--- a/src/icon.rs
+++ b/src/icon.rs
@@ -12,10 +12,6 @@ impl Default for IconName {
 pub const ICON_SIZE_STANDARD: i32 = 16;
 pub const ICON_SIZE_LARGE: i32 = 20;
 
-pub struct Icon {
-    props: IconProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct IconProps {
     pub icon: IconName,
@@ -33,62 +29,41 @@ pub struct IconProps {
     pub onclick: Callback<MouseEvent>,
 }
 
-impl Component for Icon {
-    type Message = ();
-    type Properties = IconProps;
+#[function_component(Icon)]
+pub fn icon(props: &IconProps) -> Html {
+    let paths = if props.icon_size == ICON_SIZE_STANDARD {
+        icon_svg_paths_16(props.icon)
+    } else {
+        icon_svg_paths_20(props.icon)
+    };
+    let pixel_grid_size = if props.icon_size >= ICON_SIZE_LARGE {
+        ICON_SIZE_LARGE
+    } else {
+        ICON_SIZE_STANDARD
+    };
+    let icon_string = format!("{:?}", props.icon);
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Icon { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let paths = if self.props.icon_size == ICON_SIZE_STANDARD {
-            icon_svg_paths_16(self.props.icon)
-        } else {
-            icon_svg_paths_20(self.props.icon)
-        };
-        let pixel_grid_size = if self.props.icon_size >= ICON_SIZE_LARGE {
-            ICON_SIZE_LARGE
-        } else {
-            ICON_SIZE_STANDARD
-        };
-        let icon_string = format!("{:?}", self.props.icon);
-
-        html! {
-            <span
-                class=classes!("bp3-icon", self.props.class.clone(), self.props.intent)
-                onclick=self.props.onclick.clone()
+    html! {
+        <span
+            class={classes!("bp3-icon", props.class.clone(), props.intent)}
+            onclick={props.onclick.clone()}
+        >
+            <svg
+                fill={props.color.clone()}
+                data-icon={icon_string.clone()}
+                width={props.icon_size.to_string()}
+                height={props.icon_size.to_string()}
+                viewBox={format!("0 0 {x} {x}", x=pixel_grid_size)}
             >
-                <svg
-                    fill={self.props.color.clone()}
-                    data-icon={icon_string.clone()}
-                    width={self.props.icon_size.to_string()}
-                    height={self.props.icon_size.to_string()}
-                    viewBox={format!("0 0 {x} {x}", x=pixel_grid_size)}
-                >
-                    <desc>{self.props.title.clone().unwrap_or(icon_string)}</desc>
-                    {
-                        paths.iter()
-                            .map(|x| html! {
-                                <path d=*x fillRule="evenodd" />
-                            })
-                            .collect::<Html>()
-                    }
-                </svg>
-            </span>
-        }
+                <desc>{props.title.clone().unwrap_or(icon_string)}</desc>
+                {
+                    paths.iter()
+                        .map(|x| html! {
+                            <path d={*x} fillRule="evenodd" />
+                        })
+                        .collect::<Html>()
+                }
+            </svg>
+        </span>
     }
 }
diff --git a/src/input_group.rs b/src/input_group.rs
index 705d1e3..2dc0f9c 100644
--- a/src/input_group.rs
+++ b/src/input_group.rs
@@ -4,8 +4,6 @@ use yew::prelude::*;
 const MIN_HORIZONTAL_PADDING: i32 = 10;
 
 pub struct InputGroup {
-    props: InputGroupProps,
-    link: ComponentLink<Self>,
     left_element_ref: NodeRef,
     left_element_width: Option<i32>,
     right_element_ref: NodeRef,
@@ -74,7 +72,7 @@ pub struct InputGroupProps {
     #[prop_or_default]
     pub input_type: TextInputType,
     #[prop_or_default]
-    pub oninput: Callback<InputData>,
+    pub oninput: Callback<InputEvent>,
     #[prop_or_default]
     pub onkeyup: Callback<KeyboardEvent>,
     #[prop_or_default]
@@ -91,10 +89,8 @@ impl Component for InputGroup {
     type Message = ();
     type Properties = InputGroupProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            props,
-            link,
             left_element_ref: Default::default(),
             left_element_width: Default::default(),
             right_element_ref: Default::default(),
@@ -102,20 +98,11 @@ impl Component for InputGroup {
         }
     }
 
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let input_style = match (self.left_element_width, self.right_element_width) {
             (Some(left), None) => format!("padding-left:{}px", left.max(MIN_HORIZONTAL_PADDING)),
             (None, Some(right)) => format!("padding-right:{}px", right.max(MIN_HORIZONTAL_PADDING)),
@@ -129,53 +116,53 @@ impl Component for InputGroup {
 
         html! {
             <div
-                class=classes!(
+                class={classes!(
                     "bp3-input-group",
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.small.then(|| "bp3-small"),
-                    self.props.round.then(|| "bp3-round"),
-                    self.props.placeholder.clone(),
-                    self.props.class.clone(),
-                )
+                    ctx.props().disabled.then(|| "bp3-disabled"),
+                    ctx.props().fill.then(|| "bp3-fill"),
+                    ctx.props().large.then(|| "bp3-large"),
+                    ctx.props().small.then(|| "bp3-small"),
+                    ctx.props().round.then(|| "bp3-round"),
+                    ctx.props().placeholder.clone(),
+                    ctx.props().class.clone(),
+                )}
             >
                 {
-                    if let Some(left_element) = self.props.left_element.clone() {
+                    if let Some(left_element) = ctx.props().left_element.clone() {
                         html! {
                             <span
                                 class="bp3-input-left-container"
-                                ref=self.left_element_ref.clone()
+                                ref={self.left_element_ref.clone()}
                             >
                                 {left_element}
                             </span>
                         }
-                    } else if let Some(icon) = self.props.left_icon {
+                    } else if let Some(icon) = ctx.props().left_icon {
                         html! {
-                            <Icon icon=icon />
+                            <Icon icon={icon} />
                         }
                     } else {
                         html!()
                     }
                 }
                 <input
-                    ref=self.props.input_ref.clone()
+                    ref={ctx.props().input_ref.clone()}
                     class="bp3-input"
-                    type=self.props.input_type.as_str()
-                    placeholder=self.props.placeholder.clone()
-                    disabled=self.props.disabled
-                    oninput={self.props.oninput.clone()}
-                    onkeyup={self.props.onkeyup.clone()}
-                    onkeydown={self.props.onkeydown.clone()}
-                    value=self.props.value.clone()
-                    style=input_style
+                    type={ctx.props().input_type.as_str()}
+                    placeholder={ctx.props().placeholder.clone()}
+                    disabled={ctx.props().disabled}
+                    oninput={ctx.props().oninput.clone()}
+                    onkeyup={ctx.props().onkeyup.clone()}
+                    onkeydown={ctx.props().onkeydown.clone()}
+                    value={ctx.props().value.clone()}
+                    style={input_style}
                 />
                 {
-                    if let Some(right_element) = self.props.right_element.clone() {
+                    if let Some(right_element) = ctx.props().right_element.clone() {
                         html! {
                             <span
                                 class="bp3-input-action"
-                                ref=self.right_element_ref.clone()
+                                ref={self.right_element_ref.clone()}
                             >
                                 {right_element}
                             </span>
@@ -188,7 +175,7 @@ impl Component for InputGroup {
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
         let left_old_value = self.left_element_width.take();
         self.left_element_width = self
             .left_element_ref
@@ -203,7 +190,7 @@ impl Component for InputGroup {
 
         if left_old_value != self.left_element_width || right_old_value != self.right_element_width
         {
-            self.link.send_message(());
+            ctx.link().send_message(());
         }
     }
 }
diff --git a/src/menu.rs b/src/menu.rs
index 158fbf9..c142a1e 100644
--- a/src/menu.rs
+++ b/src/menu.rs
@@ -1,11 +1,6 @@
 use crate::{Icon, IconName, Intent, H6};
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct Menu {
-    props: MenuProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct MenuProps {
     #[prop_or_default]
@@ -17,45 +12,20 @@ pub struct MenuProps {
     pub children: html::Children,
 }
 
-impl Component for Menu {
-    type Message = ();
-    type Properties = MenuProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Menu { props }
+#[function_component(Menu)]
+pub fn menu(props: &MenuProps) -> Html {
+    html! {
+        <ul
+            class={classes!(
+                "bp3-menu",
+                props.large.then(|| "bp3-large"),
+                props.class.clone(),
+            )}
+            ref={props.r#ref.clone()}
+        >
+            {props.children.clone()}
+        </ul>
     }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <ul
-                class=classes!(
-                    "bp3-menu",
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.class.clone(),
-                )
-                ref={self.props.r#ref.clone()}
-            >
-                {self.props.children.clone()}
-            </ul>
-        }
-    }
-}
-
-pub struct MenuItem {
-    props: MenuItemProps,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -71,7 +41,7 @@ pub struct MenuItemProps {
     #[prop_or_default]
     pub disabled: bool,
     #[prop_or_default]
-    pub href: Option<Cow<'static, str>>,
+    pub href: Option<String>,
     #[prop_or_default]
     pub label: Option<yew::virtual_dom::VNode>,
     #[prop_or_default]
@@ -89,127 +59,81 @@ pub struct MenuItemProps {
     // TODO: pub children: html::Children,
 }
 
-impl Component for MenuItem {
-    type Message = ();
-    type Properties = MenuItemProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        MenuItem { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <li>
-                <a
-                    class=classes!(
-                        "bp3-menu-item",
-                        self.props.active.then(|| "bp3-active"),
-                        self.props.disabled.then(|| "bp3-disabled"),
-                        self.props.intent
-                            .or_else(|| self.props.active.then(|| Intent::Primary)),
-                        self.props.class.clone(),
-                    )
-                    href={(!self.props.disabled).then(|| self.props.href.clone())}.flatten()
-                    tabIndex={(!self.props.disabled).then(|| "0")}
-                    onclick={(!self.props.disabled).then(|| self.props.onclick.clone())}
-                >
-                    {
-                        if let Some(icon_name) = self.props.icon {
-                            html! {
-                                <Icon icon={icon_name} />
-                            }
-                        } else if let Some(html) = self.props.icon_html.clone() {
-                            html
-                        } else {
-                            html! {
-                                <Icon icon=IconName::Blank />
-                            }
+#[function_component(MenuItem)]
+pub fn menu_item(props: &MenuItemProps) -> Html {
+    html! {
+        <li>
+            <a
+                class={classes!(
+                    "bp3-menu-item",
+                    props.active.then(|| "bp3-active"),
+                    props.disabled.then(|| "bp3-disabled"),
+                    props.intent
+                        .or_else(|| props.active.then(|| Intent::Primary)),
+                    props.class.clone(),
+                )}
+                href={(!props.disabled).then(|| props.href.clone()).flatten()}
+                tabIndex={(!props.disabled).then(|| "0")}
+                onclick={(!props.disabled).then(|| props.onclick.clone())}
+            >
+                {
+                    if let Some(icon_name) = props.icon {
+                        html! {
+                            <Icon icon={icon_name} />
+                        }
+                    } else if let Some(html) = props.icon_html.clone() {
+                        html
+                    } else {
+                        html! {
+                            <Icon icon={IconName::Blank} />
                         }
                     }
-                    <div class=classes!("bp3-text", "bp3-fill", self.props.text_class.clone())>
-                        {self.props.text.clone()}
-                    </div>
-                    {
-                        if let Some(label) = self.props.label.clone() {
-                            html! {
-                                <span
-                                    class=classes!(
-                                        "bp3-menu-item-label",
-                                        self.props.label_class.clone())
-                                >
-                                    {label}
-                                </span>
-                            }
-                        } else {
-                            html!()
+                }
+                <div class={classes!("bp3-text", "bp3-fill", props.text_class.clone())}>
+                    {props.text.clone()}
+                </div>
+                {
+                    if let Some(label) = props.label.clone() {
+                        html! {
+                            <span
+                                class={classes!(
+                                    "bp3-menu-item-label",
+                                    props.label_class.clone())}
+                            >
+                                {label}
+                            </span>
                         }
+                    } else {
+                        html!()
                     }
+                }
 
-                </a>
-            </li>
-        }
+            </a>
+        </li>
     }
 }
 
-pub struct MenuDivider {
-    props: MenuDividerProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct MenuDividerProps {
     #[prop_or_default]
     pub title: Option<yew::virtual_dom::VNode>,
 }
 
-impl Component for MenuDivider {
-    type Message = ();
-    type Properties = MenuDividerProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            if let Some(title) = self.props.title.clone() {
-                html! {
-                    <li
-                        class=classes!("bp3-menu-header")
-                    >
-                        <H6>{title}</H6>
-                    </li>
-                }
-            } else {
-                html! {
-                    <li class=classes!("bp3-menu-divider") />
-                }
+#[function_component(MenuDivider)]
+pub fn menu_divider(props: &MenuDividerProps) -> Html {
+    html! {
+        {if let Some(title) = props.title.clone() {
+            html! {
+                <li
+                    class={classes!("bp3-menu-header")}
+                >
+                    <H6>{title}</H6>
+                </li>
             }
-        }
+        } else {
+            html! {
+                <li class={classes!("bp3-menu-divider")} />
+            }
+        }}
     }
 }
diff --git a/src/numeric_input.rs b/src/numeric_input.rs
index bef7efd..1bf2a35 100644
--- a/src/numeric_input.rs
+++ b/src/numeric_input.rs
@@ -1,7 +1,9 @@
 use crate::{Button, ButtonGroup, ControlGroup, IconName, InputGroup, Intent};
 use std::fmt::Display;
+use std::marker::PhantomData;
 use std::ops::{Add, Bound, RangeBounds, Sub};
 use std::str::FromStr;
+use web_sys::HtmlInputElement;
 use yew::html::IntoPropValue;
 use yew::prelude::*;
 
@@ -16,9 +18,8 @@ where
         + PartialOrd
         + 'static,
 {
-    props: NumericInputProps<T>,
-    link: ComponentLink<Self>,
     input: String,
+    phantom: PhantomData<T>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -84,42 +85,46 @@ where
     type Message = Msg;
     type Properties = NumericInputProps<T>;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
-            props,
-            link,
             input: Default::default(),
+            phantom: PhantomData,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let mut update_value = |new_value| {
+            let new_value = ctx.props().bounds.clamp(new_value, ctx.props().increment);
+
+            if new_value != ctx.props().value {
+                self.input = new_value.to_string();
+                ctx.props().onchange.emit(new_value);
+                true
+            } else {
+                false
+            }
+        };
+
         match msg {
             Msg::InputUpdate(new_value) => {
                 if let Ok(new_value) = new_value.trim().parse::<T>() {
-                    self.update_value(new_value)
+                    update_value(new_value)
                 } else {
                     false
                 }
             }
-            Msg::Up => self.update_value(self.props.value + self.props.increment),
-            Msg::Down => self.update_value(self.props.value - self.props.increment),
+            Msg::Up => update_value(ctx.props().value + ctx.props().increment),
+            Msg::Down => update_value(ctx.props().value - ctx.props().increment),
             Msg::Noop => false,
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            if self.props.value != props.value {
-                self.input = props.value.to_string();
-            }
-            self.props = props;
-            true
-        } else {
-            false
-        }
+    fn changed(&mut self, ctx: &Context<Self>) -> bool {
+        self.input = ctx.props().value.to_string();
+        true
     }
 
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let NumericInputProps {
             value,
             increment,
@@ -127,8 +132,9 @@ where
             disable_buttons,
             buttons_on_the_left,
             ..
-        } = self.props;
-        let bounds = &self.props.bounds;
+        } = *ctx.props();
+
+        let bounds = &ctx.props().bounds;
         let button_up_disabled = disabled || bounds.clamp(value + increment, increment) == value;
         let button_down_disabled = disabled || bounds.clamp(value - increment, increment) == value;
 
@@ -136,16 +142,16 @@ where
             html!()
         } else {
             html! {
-                <ButtonGroup vertical=true class=classes!("bp3-fixed")>
+                <ButtonGroup vertical=true class={classes!("bp3-fixed")}>
                     <Button
-                        icon=IconName::ChevronUp
-                        disabled=button_up_disabled
-                        onclick=self.link.callback(|_| Msg::Up)
+                        icon={IconName::ChevronUp}
+                        disabled={button_up_disabled}
+                        onclick={ctx.link().callback(|_| Msg::Up)}
                     />
                     <Button
-                        icon=IconName::ChevronDown
-                        disabled=button_down_disabled
-                        onclick=self.link.callback(|_| Msg::Down)
+                        icon={IconName::ChevronDown}
+                        disabled={button_down_disabled}
+                        onclick={ctx.link().callback(|_| Msg::Down)}
                     />
                 </ButtonGroup>
             }
@@ -153,15 +159,18 @@ where
 
         let input_group = html! {
             <InputGroup
-                placeholder=self.props.placeholder.clone()
-                large=self.props.large
-                disabled=self.props.disabled
-                left_icon=self.props.left_icon
-                left_element=self.props.left_element.clone()
-                right_element=self.props.right_element.clone()
-                value=self.input.clone()
-                oninput=self.link.callback(|e: InputData| Msg::InputUpdate(e.value))
-                onkeydown=self.link.callback(|e: KeyboardEvent| {
+                placeholder={ctx.props().placeholder.clone()}
+                large={ctx.props().large}
+                disabled={ctx.props().disabled}
+                left_icon={ctx.props().left_icon}
+                left_element={ctx.props().left_element.clone()}
+                right_element={ctx.props().right_element.clone()}
+                value={self.input.clone()}
+                oninput={ctx.link().callback(|e: InputEvent| {
+                    let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                    Msg::InputUpdate(value)
+                })}
+                onkeydown={ctx.link().callback(|e: KeyboardEvent| {
                     if e.key() == "ArrowUp" {
                         Msg::Up
                     } else if e.key() == "ArrowDown" {
@@ -169,16 +178,16 @@ where
                     } else {
                         Msg::Noop
                     }
-                })
+                })}
             />
         };
 
         if buttons_on_the_left {
             html! {
                 <ControlGroup
-                    class=classes!("bp3-numeric-input")
-                    fill=self.props.fill
-                    large=self.props.large
+                    class={classes!("bp3-numeric-input")}
+                    fill={ctx.props().fill}
+                    large={ctx.props().large}
                 >
                     {buttons}
                     {input_group}
@@ -187,9 +196,9 @@ where
         } else {
             html! {
                 <ControlGroup
-                    class=classes!("bp3-numeric-input")
-                    fill=self.props.fill
-                    large=self.props.large
+                    class={classes!("bp3-numeric-input")}
+                    fill={ctx.props().fill}
+                    large={ctx.props().large}
                 >
                     {input_group}
                     {buttons}
@@ -199,30 +208,6 @@ where
     }
 }
 
-impl<T> NumericInput<T>
-where
-    T: Add<Output = T>
-        + Sub<Output = T>
-        + Copy
-        + Display
-        + FromStr
-        + PartialEq
-        + PartialOrd
-        + 'static,
-{
-    fn update_value(&mut self, new_value: T) -> ShouldRender {
-        let new_value = self.props.bounds.clamp(new_value, self.props.increment);
-
-        if new_value != self.props.value {
-            self.input = new_value.to_string();
-            self.props.onchange.emit(new_value);
-            true
-        } else {
-            false
-        }
-    }
-}
-
 #[derive(Debug, Clone, PartialEq)]
 pub struct NumericInputRangeBounds<T> {
     pub start: Bound<T>,
diff --git a/src/panel_stack.rs b/src/panel_stack.rs
index b36d57d..b3983f9 100644
--- a/src/panel_stack.rs
+++ b/src/panel_stack.rs
@@ -1,11 +1,9 @@
 use crate::{Button, IconName};
-use std::borrow::Cow;
+use gloo::timers::callback::Timeout;
 use std::cell::RefCell;
 use std::fmt;
 use std::rc::Rc;
-use std::time::Duration;
 use yew::prelude::*;
-use yew::services::timeout::{TimeoutService, TimeoutTask};
 
 pub struct PanelBuilder<F: Fn(Option<Html>, I) -> O, I, O> {
     title: Option<Html>,
@@ -119,9 +117,11 @@ impl From<StateAction> for Classes {
 }
 
 pub struct PanelStack {
-    timeout_task: Option<TimeoutTask>,
-    props: PanelStackProps,
-    link: ComponentLink<Self>,
+    timeout_task: Option<Timeout>,
+
+    // We keep track of the latest action to perform from the PanelStackState
+    // because we need a mutable access to the action.
+    action_to_perform: Option<StateAction>,
 }
 
 #[derive(Debug, Clone, PartialEq, Properties)]
@@ -141,47 +141,36 @@ impl Component for PanelStack {
     type Message = PanelStackMessage;
     type Properties = PanelStackProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Self {
             timeout_task: None,
-            props,
-            link,
+            action_to_perform: None,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             PanelStackMessage::PopPanel => {
-                self.props.state.opened_panels.borrow_mut().pop();
+                ctx.props().state.opened_panels.borrow_mut().pop();
                 true
             }
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let opened_panels = self.props.state.opened_panels.borrow();
-        let action = self.props.state.action;
-        let last = match action {
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let opened_panels = ctx.props().state.opened_panels.borrow();
+        let last = match self.action_to_perform {
             Some(StateAction::Pop) => opened_panels.len() - 2,
             _ => opened_panels.len() - 1,
         };
 
         html! {
             <div
-                class=classes!(
+                class={classes!(
                     "bp3-panel-stack2",
-                    action,
-                    self.props.class.clone(),
-                )
+                    self.action_to_perform,
+                    ctx.props().class.clone(),
+                )}
             >
             {
                 opened_panels
@@ -190,9 +179,9 @@ impl Component for PanelStack {
                     .rev()
                     .map(|(i, (title, content))| html! {
                         <Panel
-                            title=title.clone()
+                            title={title.clone()}
                             animation={
-                                match action {
+                                match self.action_to_perform {
                                     _ if i == last => Animation::EnterStart,
                                     Some(StateAction::Push) if i == last - 1 =>
                                         Animation::ExitStart,
@@ -201,8 +190,8 @@ impl Component for PanelStack {
                                     _ => Animation::Exited,
                                 }
                             }
-                            onclose=(i > 0).then(|| self.props.onclose.clone()).flatten()
-                            key=i
+                            onclose={(i > 0).then(|| ctx.props().onclose.clone()).flatten()}
+                            key={i}
                         >
                             // TODO the state of content doesn't seem to be kept when re-opening
                             //      a panel using the same components
@@ -215,21 +204,24 @@ impl Component for PanelStack {
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
-        if self.props.state.action.take() == Some(StateAction::Pop) {
-            self.timeout_task.replace(TimeoutService::spawn(
-                Duration::from_millis(400),
-                self.link.callback(|_| PanelStackMessage::PopPanel),
-            ));
+    fn changed(&mut self, ctx: &Context<Self>) -> bool {
+        self.action_to_perform = ctx.props().state.action;
+        true
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        if self.action_to_perform.take() == Some(StateAction::Pop) {
+            let link = ctx.link().clone();
+            self.timeout_task.replace(Timeout::new(400, move || {
+                link.send_message(PanelStackMessage::PopPanel)
+            }));
         }
     }
 }
 
 struct Panel {
     animation: Animation,
-    timeout_task: Option<TimeoutTask>,
-    props: PanelProps,
-    link: ComponentLink<Self>,
+    timeout_task: Option<Timeout>,
 }
 
 #[derive(Debug, Clone, PartialEq, Properties)]
@@ -249,16 +241,14 @@ impl Component for Panel {
     type Message = PanelMessage;
     type Properties = PanelProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         Self {
-            animation: props.animation,
+            animation: ctx.props().animation,
             timeout_task: None,
-            props,
-            link,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             PanelMessage::UpdateAnimation(animation) => {
                 self.animation = animation;
@@ -267,17 +257,7 @@ impl Component for Panel {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.animation = props.animation;
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let style = if self.animation == Animation::Exited {
             "display:none"
         } else {
@@ -294,15 +274,15 @@ impl Component for Panel {
                 Animation::Exited => None,
             }
         );
-        let back_button = self.props.onclose.clone().map(|onclose| {
+        let back_button = ctx.props().onclose.clone().map(|onclose| {
             html! {
                 <Button
-                    class=classes!("bp3-panel-stack-header-back")
-                    style=Cow::Borrowed("padding-right:0")
-                    icon=IconName::ChevronLeft
-                    minimal=true
-                    small=true
-                    onclick=onclose.reform(|_| ())
+                    class={classes!("bp3-panel-stack-header-back")}
+                    style={"padding-right:0"}
+                    icon={IconName::ChevronLeft}
+                    minimal={true}
+                    small={true}
+                    onclick={onclose.reform(|_| ())}
                 >
                     // TODO: I get a lot of "VComp is not mounted" if I try to use the title
                     //       of the previous panel
@@ -311,47 +291,48 @@ impl Component for Panel {
         });
 
         html! {
-            <div class=classes style=style>
+            <div class={classes} style={style}>
                 <div class="bp3-panel-stack-header">
                     <span>{back_button.unwrap_or_default()}</span>
-                    {self.props.title.clone().unwrap_or_default()}
+                    {ctx.props().title.clone().unwrap_or_default()}
                     <span/>
                 </div>
-                {for self.props.children.iter()}
+                {for ctx.props().children.iter()}
             </div>
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
+    fn changed(&mut self, ctx: &Context<Self>) -> bool {
+        self.animation = ctx.props().animation;
+        true
+    }
+
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
         match self.animation {
             Animation::EnterStart => {
-                self.timeout_task.replace(TimeoutService::spawn(
-                    Duration::from_millis(0),
-                    self.link
-                        .callback(|_| PanelMessage::UpdateAnimation(Animation::Entering)),
-                ));
+                let link = ctx.link().clone();
+                self.timeout_task.replace(Timeout::new(0, move || {
+                    link.send_message(PanelMessage::UpdateAnimation(Animation::Entering));
+                }));
             }
             Animation::Entering => {
-                self.timeout_task.replace(TimeoutService::spawn(
-                    Duration::from_millis(400),
-                    self.link
-                        .callback(|_| PanelMessage::UpdateAnimation(Animation::Entered)),
-                ));
+                let link = ctx.link().clone();
+                self.timeout_task.replace(Timeout::new(400, move || {
+                    link.send_message(PanelMessage::UpdateAnimation(Animation::Entered));
+                }));
             }
             Animation::Entered => {}
             Animation::ExitStart => {
-                self.timeout_task.replace(TimeoutService::spawn(
-                    Duration::from_millis(0),
-                    self.link
-                        .callback(|_| PanelMessage::UpdateAnimation(Animation::Exiting)),
-                ));
+                let link = ctx.link().clone();
+                self.timeout_task.replace(Timeout::new(0, move || {
+                    link.send_message(PanelMessage::UpdateAnimation(Animation::Exiting));
+                }));
             }
             Animation::Exiting => {
-                self.timeout_task.replace(TimeoutService::spawn(
-                    Duration::from_millis(400),
-                    self.link
-                        .callback(|_| PanelMessage::UpdateAnimation(Animation::Exited)),
-                ));
+                let link = ctx.link().clone();
+                self.timeout_task.replace(Timeout::new(400, move || {
+                    link.send_message(PanelMessage::UpdateAnimation(Animation::Exited));
+                }));
             }
             Animation::Exited => {}
         }
diff --git a/src/progress_bar.rs b/src/progress_bar.rs
index fce400a..4ee2920 100644
--- a/src/progress_bar.rs
+++ b/src/progress_bar.rs
@@ -1,10 +1,6 @@
 use crate::Intent;
 use yew::prelude::*;
 
-pub struct ProgressBar {
-    props: ProgressBarProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ProgressBarProps {
     #[prop_or_default]
@@ -19,48 +15,27 @@ pub struct ProgressBarProps {
     pub class: Classes,
 }
 
-impl Component for ProgressBar {
-    type Message = ();
-    type Properties = ProgressBarProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let width = if let Some(value) = self.props.value {
-            // NOTE: nightly, issue #44095 for f32::clamp
-            // let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
-            let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
-            format!("width: {}%;", percent)
-        } else {
-            "".into()
-        };
-        html! {
-            <div
-                class=classes!(
-                    "bp3-progress-bar",
-                    self.props.intent,
-                    (!self.props.animate).then(|| "bp3-no-animation"),
-                    (!self.props.stripes).then(|| "bp3-no-stripes"),
-                    self.props.class.clone(),
-                )
-            >
-                <div class=classes!("bp3-progress-meter") style={{width}}/>
-            </div>
-        }
+#[function_component(ProgressBar)]
+pub fn progress_bar(props: &ProgressBarProps) -> Html {
+    let width = if let Some(value) = props.value {
+        // NOTE: nightly, issue #44095 for f32::clamp
+        // let percent = ((1000. * value).ceil() / 10.).clamp(0.,100.);
+        let percent = ((1000. * value).ceil() / 10.).max(0.).min(100.);
+        format!("width: {}%;", percent)
+    } else {
+        "".into()
+    };
+    html! {
+        <div
+            class={classes!(
+                "bp3-progress-bar",
+                props.intent,
+                (!props.animate).then(|| "bp3-no-animation"),
+                (!props.stripes).then(|| "bp3-no-stripes"),
+                props.class.clone(),
+            )}
+        >
+            <div class={classes!("bp3-progress-meter")} style={{width}}/>
+        </div>
     }
 }
diff --git a/src/radio.rs b/src/radio.rs
index 72118a1..503c934 100644
--- a/src/radio.rs
+++ b/src/radio.rs
@@ -1,9 +1,5 @@
 use yew::prelude::*;
 
-pub struct Radio {
-    props: RadioProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct RadioProps {
     #[prop_or_default]
@@ -17,59 +13,38 @@ pub struct RadioProps {
     #[prop_or_default]
     pub name: Option<String>,
     #[prop_or_default]
-    pub onchange: Option<Callback<ChangeData>>,
+    pub onchange: Option<Callback<Event>>,
     #[prop_or_default]
     pub label: yew::virtual_dom::VNode,
     #[prop_or_default]
     pub value: Option<String>,
 }
 
-impl Component for Radio {
-    type Message = ();
-    type Properties = RadioProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <label
-                class=classes!(
-                    "bp3-control",
-                    "bp3-radio",
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.inline.then(|| "bp3-inline"),
-                    self.props.large.then(|| "bp3-large"),
-                )
+#[function_component(Radio)]
+pub fn radio(props: &RadioProps) -> Html {
+    html! {
+        <label
+            class={classes!(
+                "bp3-control",
+                "bp3-radio",
+                props.disabled.then(|| "bp3-disabled"),
+                props.inline.then(|| "bp3-inline"),
+                props.large.then(|| "bp3-large"),
+            )}
+        >
+            <input
+                type="radio"
+                onchange={props.onchange.clone().unwrap_or_default()}
+                disabled={props.disabled}
+                value={props.value.clone().unwrap_or_default()}
+                checked={props.checked.unwrap_or(false)}
+                name={props.name.clone().unwrap_or_default()}
+            />
+            <span
+                class={classes!("bp3-control-indicator")}
             >
-                <input
-                    type="radio"
-                    onchange={self.props.onchange.clone().unwrap_or_default()}
-                    disabled=self.props.disabled
-                    value={self.props.value.clone().unwrap_or_default()}
-                    checked=self.props.checked.unwrap_or(false)
-                    name={self.props.name.clone().unwrap_or_default()}
-                />
-                <span
-                    class=classes!("bp3-control-indicator")
-                >
-                </span>
-                {self.props.label.clone()}
-            </label>
-        }
+            </span>
+            {props.label.clone()}
+        </label>
     }
 }
diff --git a/src/radio_group.rs b/src/radio_group.rs
index e36fe98..f70a6d2 100644
--- a/src/radio_group.rs
+++ b/src/radio_group.rs
@@ -1,10 +1,6 @@
 use crate::Radio;
 use yew::prelude::*;
 
-pub struct RadioGroup<T: Clone + PartialEq + 'static> {
-    props: RadioGroupProps<T>,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct RadioGroupProps<T: Clone + PartialEq + 'static> {
     #[prop_or_default]
@@ -24,71 +20,46 @@ pub struct RadioGroupProps<T: Clone + PartialEq + 'static> {
     pub class: Classes,
 }
 
-impl<T: Clone + PartialEq + 'static> Component for RadioGroup<T> {
-    type Message = ();
-    type Properties = RadioGroupProps<T>;
+// impl<T: Clone + PartialEq + 'static> Component for RadioGroup<T> {
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
+#[function_component(RadioGroup)]
+pub fn radio_group<T: Clone + PartialEq + 'static>(props: &RadioGroupProps<T>) -> Html {
+    let option_children = props
+        .options
+        .iter()
+        .map(|(value, label)| {
+            let checked = props.value.as_ref().map(|x| value == x).unwrap_or_default();
+            let value = value.clone();
 
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        true
-    }
+            html! {
+                <Radio
+                    value={"".to_string()}
+                    label={html!(label)}
+                    checked={checked}
+                    onchange={props.onchange.reform(move |_| value.clone())}
+                    inline={props.inline}
+                    disabled={props.disabled}
+                    large={props.large}
+                />
+            }
+        })
+        .collect::<Html>();
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let option_children = self
-            .props
-            .options
-            .iter()
-            .map(|(value, label)| {
-                let checked = self
-                    .props
-                    .value
-                    .as_ref()
-                    .map(|x| value == x)
-                    .unwrap_or_default();
-                let value = value.clone();
-
-                html! {
-                    <Radio
-                        value="".to_string()
-                        label=html!(label)
-                        checked=checked
-                        onchange=self.props.onchange.reform(move |_| value.clone())
-                        inline=self.props.inline
-                        disabled=self.props.disabled
-                        large=self.props.large
-                    />
+    html! {
+        <div
+            class={classes!(
+                "bp3-radio-group",
+                props.class.clone(),
+            )}
+        >
+            {
+                if let Some(label) = props.label.clone() {
+                    label
+                } else {
+                    html!()
                 }
-            })
-            .collect::<Html>();
-
-        html! {
-            <div
-                class=classes!(
-                    "bp3-radio-group",
-                    self.props.class.clone(),
-                )
-            >
-                {
-                    if let Some(label) = self.props.label.clone() {
-                        label
-                    } else {
-                        html!()
-                    }
-                }
-                {option_children}
-            </div>
-        }
+            }
+            {option_children}
+        </div>
     }
 }
diff --git a/src/slider.rs b/src/slider.rs
index 218db04..4a0f850 100644
--- a/src/slider.rs
+++ b/src/slider.rs
@@ -1,19 +1,19 @@
 use crate::Intent;
 use std::borrow::Cow;
+use std::marker::PhantomData;
 use wasm_bindgen::closure::Closure;
 use wasm_bindgen::JsCast;
 use web_sys::Element;
 use yew::prelude::*;
 
 pub struct Slider<T: Clone + PartialEq + 'static> {
-    props: SliderProps<T>,
     mouse_move: Closure<dyn FnMut(MouseEvent)>,
     mouse_up: Closure<dyn FnMut(MouseEvent)>,
-    link: ComponentLink<Self>,
     handle_ref: NodeRef,
     track_ref: NodeRef,
     is_moving: bool,
     focus_handle: bool,
+    phantom: PhantomData<T>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -42,35 +42,34 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
     type Message = Msg;
     type Properties = SliderProps<T>;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         let mouse_move = {
-            let link = link.clone();
+            let link = ctx.link().clone();
             Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
                 link.send_message(Msg::Mouse(event));
             }) as Box<dyn FnMut(_)>)
         };
         let mouse_up = {
-            let link = link.clone();
+            let link = ctx.link().clone();
             Closure::wrap(Box::new(move |_event: web_sys::MouseEvent| {
                 link.send_message(Msg::StopChange);
             }) as Box<dyn FnMut(_)>)
         };
         Self {
-            props,
             mouse_move,
             mouse_up,
-            link,
             handle_ref: NodeRef::default(),
             track_ref: NodeRef::default(),
             is_moving: false,
             focus_handle: false,
+            phantom: PhantomData,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::StartChange if self.props.values.len() > 1 => {
-                let document = yew::utils::document();
+            Msg::StartChange if ctx.props().values.len() > 1 => {
+                let document = gloo::utils::document();
                 let event_target: &web_sys::EventTarget = document.as_ref();
                 self.is_moving = true;
                 event_target
@@ -89,23 +88,23 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                 true
             }
             Msg::StartChange => false,
-            Msg::Mouse(event) if self.props.values.len() > 1 => {
+            Msg::Mouse(event) if ctx.props().values.len() > 1 => {
                 if event.buttons() == crate::MOUSE_EVENT_BUTTONS_PRIMARY {
                     let track_rect = self.track_ref.cast::<Element>().expect("no track ref");
                     let tick_size = (track_rect.client_width() as f64)
-                        / self.props.values.len().saturating_sub(1) as f64;
+                        / ctx.props().values.len().saturating_sub(1) as f64;
                     let pixel_delta =
                         (event.client_x() as f64) - track_rect.get_bounding_client_rect().left();
 
                     let position = (pixel_delta / tick_size).round() as usize;
 
                     let (value, _) =
-                        self.props.values.get(position).unwrap_or_else(|| {
-                            self.props.values.last().expect("No value in the vec")
+                        ctx.props().values.get(position).unwrap_or_else(|| {
+                            ctx.props().values.last().expect("No value in the vec")
                         });
 
-                    if Some(value) != self.props.selected.as_ref() {
-                        self.props.onchange.emit(value.clone());
+                    if Some(value) != ctx.props().selected.as_ref() {
+                        ctx.props().onchange.emit(value.clone());
                     }
 
                     true
@@ -115,7 +114,7 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
             }
             Msg::Mouse(_) => false,
             Msg::StopChange => {
-                let document = yew::utils::document();
+                let document = gloo::utils::document();
                 let event_target: &web_sys::EventTarget = document.as_ref();
                 self.is_moving = false;
                 event_target
@@ -132,43 +131,43 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                     .expect("No event listener to remove");
                 true
             }
-            Msg::Keyboard(event) if self.props.values.len() > 1 => match event.key().as_str() {
+            Msg::Keyboard(event) if ctx.props().values.len() > 1 => match event.key().as_str() {
                 "ArrowDown" | "ArrowLeft" => {
                     self.focus_handle = true;
                     event.prevent_default();
-                    let index = self
-                        .props
+                    let index = ctx
+                        .props()
                         .values
                         .iter()
-                        .position(|(value, _)| Some(value) == self.props.selected.as_ref())
+                        .position(|(value, _)| Some(value) == ctx.props().selected.as_ref())
                         .map(|i| i.saturating_sub(1))
                         .unwrap_or(0);
-                    let (value, _) = self.props.values[index].clone();
-                    self.props.onchange.emit(value);
+                    let (value, _) = ctx.props().values[index].clone();
+                    ctx.props().onchange.emit(value);
                     true
                 }
                 "ArrowUp" | "ArrowRight" => {
                     self.focus_handle = true;
                     event.prevent_default();
-                    let index = self
-                        .props
+                    let index = ctx
+                        .props()
                         .values
                         .iter()
-                        .position(|(value, _)| Some(value) == self.props.selected.as_ref())
+                        .position(|(value, _)| Some(value) == ctx.props().selected.as_ref())
                         .map(|i| i.saturating_add(1))
                         .unwrap_or(0);
-                    let (value, _) = self
-                        .props
+                    let (value, _) = ctx
+                        .props()
                         .values
                         .get(index)
                         .unwrap_or_else(|| {
-                            self.props.values.last().expect(
+                            ctx.props().values.last().expect(
                                 "Already check, \
-                                    there are at least 2 values in self.props.options; qed",
+                                    there are at least 2 values in ctx.props().options; qed",
                             )
                         })
                         .clone();
-                    self.props.onchange.emit(value);
+                    ctx.props().onchange.emit(value);
                     true
                 }
                 _ => false,
@@ -177,23 +176,14 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let value_index = self
-            .props
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let value_index = ctx
+            .props()
             .values
             .iter()
-            .position(|(value, _)| Some(value) == self.props.selected.as_ref());
-        let labels = if self.props.values.len() > 1 {
-            self.props
+            .position(|(value, _)| Some(value) == ctx.props().selected.as_ref());
+        let labels = if ctx.props().values.len() > 1 {
+            ctx.props()
                 .values
                 .iter()
                 .enumerate()
@@ -201,11 +191,11 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                     label.clone().map(|x| {
                         html! {
                             <div
-                                class=classes!("bp3-slider-label")
-                                style=format!(
+                                class={classes!("bp3-slider-label")}
+                                style={format!(
                                     "left: {}%;", (i as f64) * 100.0
-                                        / ((self.props.values.len() as f64) - 1.0)
-                                )
+                                        / ((ctx.props().values.len() as f64) - 1.0)
+                                )}
                             >
                                 {x}
                             </div>
@@ -213,11 +203,11 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                     })
                 })
                 .collect::<Html>()
-        } else if let Some((_, Some(label))) = self.props.values.first() {
+        } else if let Some((_, Some(label))) = ctx.props().values.first() {
             html! {
                 <div
-                    class=classes!("bp3-slider-label")
-                    style="left: 50%;"
+                    class={classes!("bp3-slider-label")}
+                    style={"left: 50%;"}
                 >
                     {label}
                 </div>
@@ -225,9 +215,9 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
         } else {
             html!()
         };
-        let value_label = self.props.value_label.clone().map(|x| {
+        let value_label = ctx.props().value_label.clone().map(|x| {
             html! {
-                <span class=classes!("bp3-slider-label")>
+                <span class={classes!("bp3-slider-label")}>
                     {x}
                 </span>
             }
@@ -235,12 +225,12 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
 
         html! {
             <div
-                class=classes!(
+                class={classes!(
                     "bp3-slider",
-                    self.props.vertical.then(|| "bp3-vertical"),
-                )
-                onmousedown=(self.props.values.len() > 1).then(
-                    || self.link.batch_callback(
+                    ctx.props().vertical.then(|| "bp3-vertical"),
+                )}
+                onmousedown={(ctx.props().values.len() > 1).then(
+                    || ctx.link().batch_callback(
                         |event: MouseEvent| {
                             if event.buttons() ==
                                 crate::MOUSE_EVENT_BUTTONS_PRIMARY
@@ -251,19 +241,19 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                             }
                         }
                     )
-                )
+                )}
             >
                 <div
-                    class=classes!("bp3-slider-track")
+                    class={classes!("bp3-slider-track")}
                     ref={self.track_ref.clone()}
                 >
                     {
-                        if value_index.is_none() && !self.props.values.is_empty() {
+                        if value_index.is_none() && !ctx.props().values.is_empty() {
                             html! {
                                 <div
-                                    class=classes!("bp3-slider-progress")
+                                    class={classes!("bp3-slider-progress")}
                                     style="top: 0px;"
-                                    onkeydown=self.link.callback(|event| Msg::Keyboard(event))
+                                    onkeydown={ctx.link().callback(|event| Msg::Keyboard(event))}
                                     tabindex=0
                                 >
                                 </div>
@@ -271,7 +261,7 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                         } else {
                             html! {
                                 <div
-                                    class=classes!("bp3-slider-progress")
+                                    class={classes!("bp3-slider-progress")}
                                     style="top: 0px;"
                                 >
                                 </div>
@@ -280,18 +270,18 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                     }
                     {
                         match value_index {
-                            Some(index) if self.props.values.len() > 1
-                                && self.props.intent.is_some() => {
+                            Some(index) if ctx.props().values.len() > 1
+                                && ctx.props().intent.is_some() => {
                                 html! {
                                     <div
-                                        class=classes!("bp3-slider-progress", self.props.intent)
-                                        style=format!(
+                                        class={classes!("bp3-slider-progress", ctx.props().intent)}
+                                        style={format!(
                                             "left: 0%; right: {}%; top: 0px;",
                                             100.0 - (
                                                 100.0 * (index as f64)
-                                                / (self.props.values.len() as f64 - 1.0)
+                                                / (ctx.props().values.len() as f64 - 1.0)
                                             )
-                                        )
+                                        )}
                                     >
                                     </div>
                                 }
@@ -300,34 +290,34 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                         }
                     }
                 </div>
-                <div class=classes!("bp3-slider-axis")>
+                <div class={classes!("bp3-slider-axis")}>
                     {labels}
                 </div>
                 {
                     match value_index {
-                        Some(index) if self.props.values.len() > 1 =>
+                        Some(index) if ctx.props().values.len() > 1 =>
                             {
                             html! {
                                 <span
-                                    class=classes!(
+                                    class={classes!(
                                         "bp3-slider-handle",
                                         self.is_moving.then(|| "bp3-active"),
-                                    )
+                                    )}
                                     ref={self.handle_ref.clone()}
-                                    style=format!(
+                                    style={format!(
                                         "left: calc({}% - 8px);",
                                         100.0 * (index as f64)
-                                            / (self.props.values.len() as f64 - 1.0),
-                                    )
-                                    onmousedown=self.link.batch_callback(
+                                            / (ctx.props().values.len() as f64 - 1.0),
+                                    )}
+                                    onmousedown={ctx.link().batch_callback(
                                     |event: MouseEvent| {
                                         if event.buttons() == crate::MOUSE_EVENT_BUTTONS_PRIMARY {
                                             vec![Msg::StartChange]
                                         } else {
                                             vec![]
                                         }
-                                    })
-                                    onkeydown=self.link.callback(|event| Msg::Keyboard(event))
+                                    })}
+                                    onkeydown={ctx.link().callback(|event| Msg::Keyboard(event))}
                                     tabindex=0
                                 >
                                     {value_label.clone().unwrap_or_default()}
@@ -337,10 +327,10 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
                         Some(_) => {
                             html! {
                                 <span
-                                    class=classes!(
+                                    class={classes!(
                                         "bp3-slider-handle",
                                         self.is_moving.then(|| "bp3-active"),
-                                    )
+                                    )}
                                     ref={self.handle_ref.clone()}
                                     style="left: calc(50% - 8px);"
                                 >
@@ -355,7 +345,7 @@ impl<T: Clone + PartialEq + 'static> Component for Slider<T> {
         }
     }
 
-    fn rendered(&mut self, _: bool) {
+    fn rendered(&mut self, _ctx: &Context<Self>, _: bool) {
         if self.focus_handle {
             if let Some(element) = self.handle_ref.cast::<web_sys::HtmlElement>() {
                 let _ = element.focus();
diff --git a/src/spinner.rs b/src/spinner.rs
index f8c9872..263c38d 100644
--- a/src/spinner.rs
+++ b/src/spinner.rs
@@ -10,10 +10,6 @@ pub const SPINNER_SIZE_SMALL: f32 = 20.0;
 pub const SPINNER_SIZE_STANDARD: f32 = 50.0;
 pub const SPINNER_SIZE_LARGE: f32 = 100.0;
 
-pub struct Spinner {
-    props: SpinnerProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct SpinnerProps {
     #[prop_or_default]
@@ -26,77 +22,56 @@ pub struct SpinnerProps {
     pub value: f32,
 }
 
-impl Component for Spinner {
-    type Message = ();
-    type Properties = SpinnerProps;
+#[function_component(Spinner)]
+pub fn spinner(props: &SpinnerProps) -> Html {
+    let size = f32::max(SPINNER_MIN_SIZE, props.size);
+    let stroke_width = f32::min(MIN_STROKE_WIDTH, (STROKE_WIDTH * SPINNER_SIZE_LARGE) / size);
+    let view_box = {
+        let radius = R + stroke_width / 2.00;
+        let view_box_x = 50.00 - radius;
+        let view_box_width = radius * 2.00;
+        format!(
+            "{:.2} {:.2} {:.2} {:.2}",
+            view_box_x, view_box_x, view_box_width, view_box_width,
+        )
+    };
+    let spinner_track = format!(
+        "M 50,50 m 0,-{R:.0} a {R:.0},{R:.0} 0 1 1 0,{R2:.0} a {R:.0},{R:.0} 0 1 1 0,-{R2:.0}",
+        R = R,
+        R2 = R * 2.0,
+    );
+    let stroke_offset = PATH_LENGTH - PATH_LENGTH * props.value.clamp(0.0, 1.0);
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Spinner { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let size = f32::max(SPINNER_MIN_SIZE, self.props.size);
-        let stroke_width = f32::min(MIN_STROKE_WIDTH, (STROKE_WIDTH * SPINNER_SIZE_LARGE) / size);
-        let view_box = {
-            let radius = R + stroke_width / 2.00;
-            let view_box_x = 50.00 - radius;
-            let view_box_width = radius * 2.00;
-            format!(
-                "{:.2} {:.2} {:.2} {:.2}",
-                view_box_x, view_box_x, view_box_width, view_box_width,
-            )
-        };
-        let spinner_track = format!(
-            "M 50,50 m 0,-{R:.0} a {R:.0},{R:.0} 0 1 1 0,{R2:.0} a {R:.0},{R:.0} 0 1 1 0,-{R2:.0}",
-            R = R,
-            R2 = R * 2.0,
-        );
-        let stroke_offset = PATH_LENGTH - PATH_LENGTH * self.props.value.clamp(0.0, 1.0);
-
-        html! {
+    html! {
+        <div
+            class={classes!(
+                "bp3-spinner",
+                props.intent,
+                props.class.clone(),
+            )}
+        >
             <div
-                class=classes!(
-                    "bp3-spinner",
-                    self.props.intent,
-                    self.props.class.clone(),
-                )
+                class={classes!("bp3-spinner-animation")}
             >
-                <div
-                    class=classes!("bp3-spinner-animation")
+                <svg
+                    width={size.to_string()}
+                    height={size.to_string()}
+                    stroke-width={stroke_width.to_string()}
+                    viewBox={view_box}
                 >
-                    <svg
-                        width=size.to_string()
-                        height=size.to_string()
-                        stroke-width=stroke_width.to_string()
-                        viewBox=view_box
-                    >
-                        <path
-                            class=classes!("bp3-spinner-track")
-                            d=spinner_track.clone()
-                        />
-                        <path
-                            class=classes!("bp3-spinner-head")
-                            d=spinner_track
-                            pathLength=PATH_LENGTH.to_string()
-                            stroke-dasharray=format!("{} {}", PATH_LENGTH, PATH_LENGTH)
-                            stroke-dashoffset=stroke_offset.to_string()
-                        />
-                    </svg>
-                </div>
+                    <path
+                        class={classes!("bp3-spinner-track")}
+                        d={spinner_track.clone()}
+                    />
+                    <path
+                        class={classes!("bp3-spinner-head")}
+                        d={spinner_track}
+                        pathLength={PATH_LENGTH.to_string()}
+                        stroke-dasharray={format!("{} {}", PATH_LENGTH, PATH_LENGTH)}
+                        stroke-dashoffset={stroke_offset.to_string()}
+                    />
+                </svg>
             </div>
-        }
+        </div>
     }
 }
diff --git a/src/switch.rs b/src/switch.rs
index e2ad1cf..c9e5369 100644
--- a/src/switch.rs
+++ b/src/switch.rs
@@ -1,9 +1,5 @@
 use yew::prelude::*;
 
-pub struct Switch {
-    props: SwitchProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct SwitchProps {
     #[prop_or_default]
@@ -28,85 +24,64 @@ pub struct SwitchProps {
     pub align_right: bool,
 }
 
-impl Component for Switch {
-    type Message = ();
-    type Properties = SwitchProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let display_label = {
-            if self.props.inner_label.is_some() || self.props.inner_label_checked.is_some() {
-                let inner_label = self.props.inner_label.as_deref().unwrap_or_default();
-                let inner_label_checked = self.props.inner_label_checked.as_ref();
-                html! {
-                    <>
-                        <div class=classes!("bp3-control-indicator-child")>
-                            <div class=classes!("bp3-switch-inner-text")>
-                                {
-                                    if let Some(label_checked) = inner_label_checked {
-                                        label_checked.clone()
-                                    } else {
-                                        inner_label.to_string()
-                                    }
+#[function_component(Switch)]
+pub fn switch(props: &SwitchProps) -> Html {
+    let display_label = {
+        if props.inner_label.is_some() || props.inner_label_checked.is_some() {
+            let inner_label = props.inner_label.as_deref().unwrap_or_default();
+            let inner_label_checked = props.inner_label_checked.as_ref();
+            html! {
+                <>
+                    <div class={classes!("bp3-control-indicator-child")}>
+                        <div class={classes!("bp3-switch-inner-text")}>
+                            {
+                                if let Some(label_checked) = inner_label_checked {
+                                    label_checked.clone()
+                                } else {
+                                    inner_label.to_string()
                                 }
-                            </div>
+                            }
                         </div>
-                        <div class=classes!("bp3-control-indicator-child")>
-                            <div class=classes!("bp3-switch-inner-text")>
-                                {inner_label.to_string()}
-                            </div>
+                    </div>
+                    <div class={classes!("bp3-control-indicator-child")}>
+                        <div class={classes!("bp3-switch-inner-text")}>
+                            {inner_label.to_string()}
                         </div>
-                    </>
-                }
-            } else {
-                Html::default()
+                    </div>
+                </>
             }
-        };
-        html! {
-            <label
-                class=classes!(
-                    "bp3-control",
-                    "bp3-switch",
-                    self.props.disabled.then(|| "bp3-disabled"),
-                    self.props.inline.then(|| "bp3-inline"),
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.class.clone(),
-                    if self.props.align_right {
-                        "bp3-align-right"
-                    } else {
-                        "bp3-align-left"
-                    },
-                )
-            >
-            <input
-                type="checkbox"
-                checked={self.props.checked}
-                onclick={self.props.onclick.clone()}
-                disabled=self.props.disabled
-            />
-            <span
-                class=classes!("bp3-control-indicator")
-            >
-                {display_label}
-            </span>
-            {self.props.label.clone()}
-            </label>
+        } else {
+            Html::default()
         }
+    };
+    html! {
+        <label
+            class={classes!(
+                "bp3-control",
+                "bp3-switch",
+                props.disabled.then(|| "bp3-disabled"),
+                props.inline.then(|| "bp3-inline"),
+                props.large.then(|| "bp3-large"),
+                props.class.clone(),
+                if props.align_right {
+                    "bp3-align-right"
+                } else {
+                    "bp3-align-left"
+                },
+            )}
+        >
+        <input
+            type="checkbox"
+            checked={props.checked}
+            onclick={props.onclick.clone()}
+            disabled={props.disabled}
+        />
+        <span
+            class={classes!("bp3-control-indicator")}
+        >
+            {display_label}
+        </span>
+        {props.label.clone()}
+        </label>
     }
 }
diff --git a/src/tabs.rs b/src/tabs.rs
index 8b1e8fb..e1be23a 100644
--- a/src/tabs.rs
+++ b/src/tabs.rs
@@ -1,12 +1,13 @@
 use std::collections::{hash_map::DefaultHasher, HashMap};
 use std::hash::{Hash, Hasher};
+use std::marker::PhantomData;
 use web_sys::HtmlElement;
 use yew::prelude::*;
 
 pub struct Tabs<T: Clone + PartialEq + Hash + 'static> {
-    props: TabsProps<T>,
     tab_refs: HashMap<u64, NodeRef>,
     indicator_ref: NodeRef,
+    phantom: PhantomData<T>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -34,8 +35,9 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
     type Message = ();
     type Properties = TabsProps<T>;
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        let tab_refs = props
+    fn create(ctx: &Context<Self>) -> Self {
+        let tab_refs = ctx
+            .props()
             .tabs
             .iter()
             .map(|x| {
@@ -46,62 +48,53 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
             })
             .collect::<HashMap<_, _>>();
 
-        Tabs {
-            props,
+        Self {
             tab_refs,
             indicator_ref: Default::default(),
+            phantom: PhantomData,
         }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let tabs = self
-            .props
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let tabs = ctx
+            .props()
             .tabs
             .iter()
             .map(|x| {
                 let mut hasher = DefaultHasher::new();
                 x.id.hash(&mut hasher);
                 let id = hasher.finish();
-                let title_id = format!("bp3-tab-title_{}_{}", self.props.id, id);
-                let panel_id = format!("bp3-tab-panel_{}_{}", self.props.id, id);
-                let selected = self.props.selected_tab_id == x.id;
+                let title_id = format!("bp3-tab-title_{}_{}", ctx.props().id, id);
+                let panel_id = format!("bp3-tab-panel_{}_{}", ctx.props().id, id);
+                let selected = ctx.props().selected_tab_id == x.id;
                 (x, id, title_id, panel_id, selected)
             })
             .collect::<Vec<_>>();
 
         html! {
             <div
-                class=classes!(
+                class={classes!(
                     "bp3-tabs",
-                    self.props.vertical.then(|| "bp3-vertical"),
-                    self.props.class.clone(),
-                )
+                    ctx.props().vertical.then(|| "bp3-vertical"),
+                    ctx.props().class.clone(),
+                )}
             >
                 <div
-                    class=classes!(
+                    class={classes!(
                         "bp3-tab-list",
-                        self.props.large.then(|| "bp3-large"),
-                    )
+                        ctx.props().large.then(|| "bp3-large"),
+                    )}
                 >
                     {
-                        if self.props.animate {
+                        if ctx.props().animate {
                             html! {
                                 <div
                                     class="bp3-tab-indicator-wrapper"
-                                    ref=self.indicator_ref.clone()
+                                    ref={self.indicator_ref.clone()}
                                 >
                                     <div class="bp3-tab-indicator" />
                                 </div>
@@ -115,27 +108,27 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
                             .iter()
                             .map(|(props, id, title_id, panel_id, selected)| html! {
                                 <div
-                                    class=classes!(
+                                    class={classes!(
                                         "bp3-tab",
                                         props.title_class.clone(),
-                                    )
-                                    aria-disabled=props.disabled.then(|| "true")
-                                    aria-expanded=selected.to_string()
-                                    aria-selected=selected.to_string()
+                                    )}
+                                    aria-disabled={props.disabled.then(|| "true")}
+                                    aria-expanded={selected.to_string()}
+                                    aria-selected={selected.to_string()}
                                     role="tab"
                                     tabIndex={(!props.disabled).then(|| "0")}
-                                    id=title_id.to_string()
-                                    aria-controls=panel_id.to_string()
-                                    data-tab-id=id.to_string()
+                                    id={title_id.to_string()}
+                                    aria-controls={panel_id.to_string()}
+                                    data-tab-id={id.to_string()}
                                     onclick={(!props.disabled).then(|| {
                                         let tab_id = props.id.clone();
-                                        self
-                                            .props
+                                        ctx
+                                            .props()
                                             .onchange
                                             .reform(move |_| tab_id.clone())
                                     })}
-                                    key=*id
-                                    ref=self.tab_refs[id].clone()
+                                    key={*id}
+                                    ref={self.tab_refs[id].clone()}
                                 >
                                     { props.title.clone() }
                                 </div>
@@ -147,19 +140,19 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
                     tabs
                         .iter()
                         .filter(|(_, _, _, _, selected)| {
-                            !self.props.render_active_panel_only || *selected
+                            !ctx.props().render_active_panel_only || *selected
                         })
                         .map(|(props, id, title_id, panel_id, selected)| html! {
                             <div
-                                class=classes!(
+                                class={classes!(
                                     "bp3-tab-panel",
                                     selected.then(|| props.panel_class.clone()),
-                                )
-                                aria-labelledby=title_id.to_string()
-                                aria-hidden=(!selected).then(|| "true")
+                                )}
+                                aria-labelledby={title_id.to_string()}
+                                aria-hidden={(!selected).then(|| "true")}
                                 role="tabpanel"
-                                id=panel_id.to_string()
-                                key=*id
+                                id={panel_id.to_string()}
+                                key={*id}
                             >
                                 { props.panel.clone() }
                             </div>
@@ -170,10 +163,10 @@ impl<T: Clone + PartialEq + Hash + 'static> Component for Tabs<T> {
         }
     }
 
-    fn rendered(&mut self, _first_render: bool) {
-        if self.props.animate {
+    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
+        if ctx.props().animate {
             let mut hasher = DefaultHasher::new();
-            self.props.selected_tab_id.hash(&mut hasher);
+            ctx.props().selected_tab_id.hash(&mut hasher);
             let id = hasher.finish();
             let indicator = self.indicator_ref.cast::<HtmlElement>().unwrap();
 
diff --git a/src/tag.rs b/src/tag.rs
index 1580d3c..bc3afec 100644
--- a/src/tag.rs
+++ b/src/tag.rs
@@ -1,11 +1,6 @@
 use crate::{if_html, Icon, IconName, Intent, Text};
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct Tag {
-    props: TagProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct TagProps {
     #[prop_or_default]
@@ -36,81 +31,60 @@ pub struct TagProps {
     #[prop_or_default]
     pub round: bool,
     #[prop_or_default]
-    pub title: Option<Cow<'static, str>>,
+    pub title: Option<String>,
     #[prop_or_default]
     pub class: Classes,
     #[prop_or_default]
-    pub style: Option<Cow<'static, str>>,
+    pub style: Option<String>,
 }
 
-impl Component for Tag {
-    type Message = ();
-    type Properties = TagProps;
+#[function_component(Tag)]
+pub fn tag(props: &TagProps) -> Html {
+    let icon = if_html!(let Some(icon) = props.icon => <Icon icon={icon} />);
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Tag { props }
-    }
+    let right_icon =
+        if_html!(let Some(right_icon) = props.right_icon => <Icon icon={right_icon} />);
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let icon = if_html!(let Some(icon) = self.props.icon => <Icon icon=icon />);
-
-        let right_icon =
-            if_html!(let Some(right_icon) = self.props.right_icon => <Icon icon=right_icon />);
-
-        let remove_button = if_html! {
-            let Some(callback) = self.props.onremove.clone() =>
-            html!(
-                <button
-                    class=classes!("bp3-tag-remove")
-                    onclick={callback}
-                    tabindex={self.props.interactive.then(|| "0")}
-                >
-                    <Icon icon=IconName::SmallCross />
-                </button>
-            )
-        };
-
-        html! {
-            <span
-                class=classes!(
-                    "bp3-tag",
-                    self.props.intent,
-                    self.props.active.then(|| "bp3-active"),
-                    self.props.fill.then(|| "bp3-fill"),
-                    self.props.interactive.then(|| "bp3-interactive"),
-                    self.props.large.then(|| "bp3-large"),
-                    self.props.minimal.then(|| "bp3-minimal"),
-                    self.props.round.then(|| "bp3-round"),
-                    self.props.class.clone(),
-                )
-                style=self.props.style.clone()
-                onclick={self.props.onclick.clone()}
+    let remove_button = if_html! {
+        let Some(callback) = props.onremove.clone() =>
+        html!(
+            <button
+                class={classes!("bp3-tag-remove")}
+                onclick={callback}
+                tabindex={props.interactive.then(|| "0")}
             >
-                {icon}
-                <Text
-                    class=classes!("bp3-fill")
-                    ellipsize={!self.props.multiline}
-                    title=self.props.title.clone()
-                    inline=true
-                >
-                    {self.props.children.clone()}
-                </Text>
-                {right_icon}
-                {remove_button}
-            </span>
-        }
+                <Icon icon={IconName::SmallCross} />
+            </button>
+        )
+    };
+
+    html! {
+        <span
+            class={classes!(
+                "bp3-tag",
+                props.intent,
+                props.active.then(|| "bp3-active"),
+                props.fill.then(|| "bp3-fill"),
+                props.interactive.then(|| "bp3-interactive"),
+                props.large.then(|| "bp3-large"),
+                props.minimal.then(|| "bp3-minimal"),
+                props.round.then(|| "bp3-round"),
+                props.class.clone(),
+            )}
+            style={props.style.clone()}
+            onclick={props.onclick.clone()}
+        >
+            {icon}
+            <Text
+                class={classes!("bp3-fill")}
+                ellipsize={!props.multiline}
+                title={props.title.clone()}
+                inline=true
+            >
+                {props.children.clone()}
+            </Text>
+            {right_icon}
+            {remove_button}
+        </span>
     }
 }
diff --git a/src/text.rs b/src/text.rs
index 6246bc2..77f0985 100644
--- a/src/text.rs
+++ b/src/text.rs
@@ -1,10 +1,5 @@
-use std::borrow::Cow;
 use yew::prelude::*;
 
-pub struct Text {
-    props: TextProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct TextProps {
     #[prop_or_default]
@@ -17,44 +12,23 @@ pub struct TextProps {
     #[prop_or_default]
     pub inline: bool,
     #[prop_or_default]
-    pub title: Option<Cow<'static, str>>,
+    pub title: Option<String>,
     #[prop_or_default]
-    pub style: Option<Cow<'static, str>>,
+    pub style: Option<String>,
 }
 
-impl Component for Text {
-    type Message = ();
-    type Properties = TextProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Text { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <@{if self.props.inline { "span" } else { "div"}}
-                class=classes!(
-                    self.props.class.clone(),
-                    self.props.ellipsize.then (|| "bp3-text-overflow-ellipsis"),
-                )
-                style=self.props.style.clone()
-                title=self.props.title.clone()
-            >
-                {self.props.children.clone()}
-            </@>
-        }
+#[function_component(Text)]
+pub fn text(props: &TextProps) -> Html {
+    html! {
+        <@{if props.inline { "span" } else { "div"}}
+            class={classes!(
+                props.class.clone(),
+                props.ellipsize.then (|| "bp3-text-overflow-ellipsis"),
+            )}
+            style={props.style.clone()}
+            title={props.title.clone()}
+        >
+            {props.children.clone()}
+        </@>
     }
 }
diff --git a/src/text_area.rs b/src/text_area.rs
index 496019c..10cce90 100644
--- a/src/text_area.rs
+++ b/src/text_area.rs
@@ -1,10 +1,6 @@
 use crate::Intent;
 use yew::prelude::*;
 
-pub struct TextArea {
-    props: TextAreaProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct TextAreaProps {
     #[prop_or_default]
@@ -22,44 +18,23 @@ pub struct TextAreaProps {
     #[prop_or_default]
     pub small: bool,
     #[prop_or_default]
-    pub onchange: Option<Callback<ChangeData>>,
+    pub onchange: Option<Callback<Event>>,
 }
 
-impl Component for TextArea {
-    type Message = ();
-    type Properties = TextAreaProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        TextArea { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let classes = classes!(
-            "bp3-input",
-            self.props.intent,
-            self.props.class.clone(),
-            self.props.fill.then(|| "bp3-fill"),
-            self.props.small.then(|| "bp3-small"),
-            self.props.large.then(|| "bp3-large"),
-        );
-        html! {
-            <textarea
-                class=classes
-                onchange=self.props.onchange.clone()
-            />
-        }
+#[function_component(TextArea)]
+pub fn text_area(props: &TextAreaProps) -> Html {
+    let classes = classes!(
+        "bp3-input",
+        props.intent,
+        props.class.clone(),
+        props.fill.then(|| "bp3-fill"),
+        props.small.then(|| "bp3-small"),
+        props.large.then(|| "bp3-large"),
+    );
+    html! {
+        <textarea
+            class={classes}
+            onchange={props.onchange.clone()}
+        />
     }
 }
diff --git a/src/tree.rs b/src/tree.rs
index 195241e..1034b18 100644
--- a/src/tree.rs
+++ b/src/tree.rs
@@ -6,6 +6,7 @@ use std::cell::{Ref, RefCell, RefMut};
 use std::collections::hash_map::DefaultHasher;
 use std::collections::HashMap;
 use std::hash::{Hash, Hasher};
+use std::marker::PhantomData;
 use std::rc::Rc;
 use yew::prelude::*;
 
@@ -41,13 +42,13 @@ impl<T> From<id_tree::Tree<NodeData<T>>> for TreeData<T> {
     }
 }
 
-pub struct Tree<T: Clone> {
-    props: TreeProps<T>,
+pub struct Tree<T: Clone + PartialEq> {
     previous_expanded_state: RefCell<HashMap<u64, bool>>,
+    phantom: PhantomData<T>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
-pub struct TreeProps<T: Clone> {
+pub struct TreeProps<T: Clone + PartialEq> {
     #[prop_or_default]
     pub is_expanded: bool,
     pub tree: TreeData<T>,
@@ -112,41 +113,32 @@ impl<T: Clone + PartialEq + 'static> Component for Tree<T> {
     type Message = ();
     type Properties = TreeProps<T>;
 
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Tree {
-            props,
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {
             previous_expanded_state: Default::default(),
+            phantom: PhantomData,
         }
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let tree = self.props.tree.borrow();
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let tree = ctx.props().tree.borrow();
 
         let nodes = if let Some(root_id) = tree.root_node_id() {
-            self.render_children(root_id, 0)
+            self.render_children(ctx, root_id, 0)
         } else {
             html!()
         };
 
         html! {
-            <div class=classes!(
+            <div class={classes!(
                 "bp3-tree",
-                self.props.class.clone(),
-            )>
-                <ul class=classes!("bp3-tree-node-list")>
+                ctx.props().class.clone(),
+            )}>
+                <ul class={classes!("bp3-tree-node-list")}>
                     {nodes}
                 </ul>
             </div>
@@ -154,9 +146,15 @@ impl<T: Clone + PartialEq + 'static> Component for Tree<T> {
     }
 }
 
-impl<T: Clone> Tree<T> {
-    fn render_children(&self, node_id: &NodeId, depth: u32) -> yew::virtual_dom::VNode {
-        let tree = self.props.tree.borrow();
+// FIXME: The 'static bound here is probably wrong. Fix this at the end of PR.
+impl<T: 'static + Clone + PartialEq> Tree<T> {
+    fn render_children(
+        &self,
+        ctx: &Context<Self>,
+        node_id: &NodeId,
+        depth: u32,
+    ) -> yew::virtual_dom::VNode {
+        let tree = ctx.props().tree.borrow();
         let node = tree.get(node_id).unwrap();
         let children = node.children();
 
@@ -177,26 +175,26 @@ impl<T: Clone> Tree<T> {
                 let inner_nodes = if !data.is_expanded && !previous_is_expanded.unwrap_or(true) {
                     Default::default()
                 } else {
-                    self.render_children(node_id, depth + 1)
+                    self.render_children(ctx, node_id, depth + 1)
                 };
 
                 html! {
                     <TreeNode
-                        disabled=data.disabled
-                        has_caret=data.has_caret
-                        icon=data.icon
-                        icon_color=data.icon_color.clone()
-                        icon_intent=data.icon_intent
-                        is_expanded=data.is_expanded
-                        is_selected=data.is_selected
-                        label=data.label.clone()
-                        secondary_label=data.secondary_label.clone()
-                        on_collapse=self.props.on_collapse.clone()
-                        on_expand=self.props.on_expand.clone()
-                        onclick=self.props.onclick.clone()
-                        depth=depth
-                        node_id=node_id.clone()
-                        key=key
+                        disabled={data.disabled}
+                        has_caret={data.has_caret}
+                        icon={data.icon}
+                        icon_color={data.icon_color.clone()}
+                        icon_intent={data.icon_intent}
+                        is_expanded={data.is_expanded}
+                        is_selected={data.is_selected}
+                        label={data.label.clone()}
+                        secondary_label={data.secondary_label.clone()}
+                        on_collapse={ctx.props().on_collapse.clone()}
+                        on_expand={ctx.props().on_expand.clone()}
+                        onclick={ctx.props().onclick.clone()}
+                        depth={depth}
+                        node_id={node_id.clone()}
+                        key={key}
                     >
                         {inner_nodes}
                     </TreeNode>
@@ -207,7 +205,6 @@ impl<T: Clone> Tree<T> {
 }
 
 struct TreeNode {
-    props: TreeNodeProps,
     handler_caret_click: Callback<MouseEvent>,
     handler_click: Callback<MouseEvent>,
 }
@@ -260,34 +257,33 @@ impl Component for TreeNode {
     type Message = TreeNodeMessage;
     type Properties = TreeNodeProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         TreeNode {
-            handler_caret_click: link.callback(TreeNodeMessage::CaretClick),
-            handler_click: link.callback(TreeNodeMessage::Click),
-            props,
+            handler_caret_click: ctx.link().callback(TreeNodeMessage::CaretClick),
+            handler_click: ctx.link().callback(TreeNodeMessage::Click),
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        if self.props.disabled {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        if ctx.props().disabled {
             return false;
         }
 
         match msg {
             TreeNodeMessage::CaretClick(event) => {
-                if self.props.is_expanded {
-                    if let Some(on_collapse) = self.props.on_collapse.as_ref() {
+                if ctx.props().is_expanded {
+                    if let Some(on_collapse) = ctx.props().on_collapse.as_ref() {
                         event.stop_propagation();
-                        on_collapse.emit((self.props.node_id.clone(), event));
+                        on_collapse.emit((ctx.props().node_id.clone(), event));
                     }
-                } else if let Some(on_expand) = self.props.on_expand.as_ref() {
+                } else if let Some(on_expand) = ctx.props().on_expand.as_ref() {
                     event.stop_propagation();
-                    on_expand.emit((self.props.node_id.clone(), event));
+                    on_expand.emit((ctx.props().node_id.clone(), event));
                 }
             }
             TreeNodeMessage::Click(event) => {
-                if let Some(onclick) = self.props.onclick.as_ref() {
-                    onclick.emit((self.props.node_id.clone(), event));
+                if let Some(onclick) = ctx.props().onclick.as_ref() {
+                    onclick.emit((ctx.props().node_id.clone(), event));
                 }
             }
         }
@@ -295,38 +291,23 @@ impl Component for TreeNode {
         false
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            // crate::log!(
-            //     "rerender {:?} {} {:?}",
-            //     self.props.node_id,
-            //     self.props.children == props.children,
-            //     self.props.icon,
-            // );
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        let content_style = format!("padding-left: {}px;", 23 * self.props.depth);
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let content_style = format!("padding-left: {}px;", 23 * ctx.props().depth);
 
         html! {
-            <li class=classes!(
+            <li class={classes!(
                 "bp3-tree-node",
-                self.props.is_selected.then(|| "bp3-tree-node-selected")
-            )>
+                ctx.props().is_selected.then(|| "bp3-tree-node-selected")
+            )}>
                 <div
                     class="bp3-tree-node-content"
-                    style=content_style
-                    onclick=self.handler_click.clone()
+                    style={content_style}
+                    onclick={self.handler_click.clone()}
                 >
                     {
-                        if self.props.has_caret {
+                        if ctx.props().has_caret {
                             let mut class = Classes::from("bp3-tree-node-caret");
-                            class.push(if self.props.is_expanded {
+                            class.push(if ctx.props().is_expanded {
                                 "bp3-tree-node-caret-open"
                             } else {
                                 "bp3-tree-node-caret-closed"
@@ -334,9 +315,9 @@ impl Component for TreeNode {
 
                             html! {
                                 <Icon
-                                    class=classes!(class.to_string())
-                                    icon=IconName::ChevronRight
-                                    onclick=self.handler_caret_click.clone()
+                                    class={classes!(class.to_string())}
+                                    icon={IconName::ChevronRight}
+                                    onclick={self.handler_caret_click.clone()}
                                 />
                             }
                         } else {
@@ -346,16 +327,16 @@ impl Component for TreeNode {
                         }
                     }
                     <Icon
-                        class=classes!("bp3-tree-node-icon")
-                        icon=self.props.icon.unwrap_or_default()
-                        color=self.props.icon_color.clone()
-                        intent=self.props.icon_intent
+                        class={classes!("bp3-tree-node-icon")}
+                        icon={ctx.props().icon.unwrap_or_default()}
+                        color={ctx.props().icon_color.clone()}
+                        intent={ctx.props().icon_intent}
                     />
-                    <span class=classes!("bp3-tree-node-label")>{self.props.label.clone()}</span>
+                    <span class={classes!("bp3-tree-node-label")}>{ctx.props().label.clone()}</span>
                     {
-                        if let Some(label) = self.props.secondary_label.clone() {
+                        if let Some(label) = ctx.props().secondary_label.clone() {
                             html!(
-                                <span class=classes!("bp3-tree-node-secondary-label")>
+                                <span class={classes!("bp3-tree-node-secondary-label")}>
                                     {label}
                                 </span>
                             )
@@ -364,9 +345,9 @@ impl Component for TreeNode {
                         }
                     }
                 </div>
-                <Collapse is_open=self.props.is_expanded>
-                    <ul class=classes!("bp3-tree-node-list")>
-                        {self.props.children.clone()}
+                <Collapse is_open={ctx.props().is_expanded}>
+                    <ul class={classes!("bp3-tree-node-list")}>
+                        {ctx.props().children.clone()}
                     </ul>
                 </Collapse>
             </li>
diff --git a/yewprint-doc/Cargo.toml b/yewprint-doc/Cargo.toml
index 5551128..459188c 100644
--- a/yewprint-doc/Cargo.toml
+++ b/yewprint-doc/Cargo.toml
@@ -2,7 +2,7 @@
 name = "yewprint-doc"
 version = "0.1.0"
 authors = ["Cecile Tonglet <cecile.tonglet@cecton.com>"]
-edition = "2018"
+edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -10,11 +10,14 @@ edition = "2018"
 crate-type = ["cdylib"]
 
 [dependencies]
-wasm-bindgen = "=0.2"
-yew = "0.18"
-web-sys = { version = "0.3", features = ["Window", "MediaQueryList"] }
+wasm-bindgen = "0.2"
+web-sys = { version = "0.3", features = ["Window", "MediaQueryList", "Event", "HtmlInputElement"] }
+gloo = "0.6"
+yew = "0.19"
+yew-router = "0.16"
+# yew = { git = "https://github.com/yewstack/yew", branch = "master" }
+# yew-router = { git = "https://github.com/yewstack/yew", branch = "master" }
 yewprint = { path = ".." }
-yew-router = "0.15"
 
 # `wee_alloc` is a tiny allocator for wasm that is only ~1K in code size
 # compared to the default allocator's ~10K. It is slower than the default
diff --git a/yewprint-doc/src/app.rs b/yewprint-doc/src/app.rs
index 470b7aa..1de415c 100644
--- a/yewprint-doc/src/app.rs
+++ b/yewprint-doc/src/app.rs
@@ -22,19 +22,21 @@ use crate::tag::*;
 use crate::text::*;
 use crate::text_area::*;
 use crate::tree::*;
-use std::borrow::Cow;
 use yew::prelude::*;
-use yew_router::{
-    agent::{RouteAgentDispatcher, RouteRequest},
-    router::Router,
-    Switch,
-};
+use yew_router::prelude::*;
 use yewprint::{IconName, Menu, MenuItem};
 
+#[function_component(AppRoot)]
+pub fn app_root() -> Html {
+    html! {
+        <BrowserRouter>
+            <App></App>
+        </BrowserRouter>
+    }
+}
+
 pub struct App {
-    link: ComponentLink<Self>,
     dark_theme: bool,
-    route_dispatcher: RouteAgentDispatcher,
 }
 
 pub enum Msg {
@@ -46,33 +48,30 @@ impl Component for App {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         App {
             dark_theme: web_sys::window()
                 .and_then(|x| x.match_media("(prefers-color-scheme: dark)").ok().flatten())
                 .map(|x| x.matches())
                 .unwrap_or(true),
-            link,
-            route_dispatcher: RouteAgentDispatcher::new(),
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ToggleLight => self.dark_theme ^= true,
             Msg::GoToMenu(doc_menu) => {
-                self.route_dispatcher
-                    .send(RouteRequest::ChangeRoute(doc_menu.into()));
+                if let Some(history) = ctx.link().history() {
+                    history.push(doc_menu);
+                } else {
+                    gloo::console::warn!("Could not get history from Context");
+                }
             }
         }
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let netlify_badge = if self.dark_theme {
             "https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
         } else {
@@ -89,223 +88,178 @@ impl Component for App {
             IconName::Moon
         };
 
-        html! {
-            <div class=classes!("docs-root", self.dark_theme.then(|| "bp3-dark"))>
-                <div class=classes!("docs-app")>
-                    <div class=classes!("docs-nav-wrapper")>
-                        <div class=classes!("docs-nav")>
-                            <div class=classes!("docs-nav-title")>
-                                <a class=classes!("docs-logo") href="/">
-                                    {crate::include_raw_html!("logo.svg")}
-                                </a>
-                                <div>
-                                    <div class=classes!("bp3-navbar-heading", "docs-heading")>
-                                        {"Yewprint"}
-                                    </div>
-                                    <a
-                                        class=classes!("bp3-text-muted")
-                                        href="https://github.com/yewprint/yewprint"
-                                        target="_blank"
-                                    >
-                                        <small>{"View on GitHub"}</small>
-                                    </a>
-                                </div>
-                            </div>
-                            <Menu>
-                                <MenuItem
-                                    text={html!(go_to_theme_label)}
-                                    onclick=self.link
-                                        .callback(|_| Msg::ToggleLight)
-                                    icon=go_to_theme_icon
-                                />
-                                <MenuItem
-                                    text={html!("Button")}
-                                    href=Cow::Borrowed("#button")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Button))
-                                />
-                                <MenuItem
-                                    text={html!("ButtonGroup")}
-                                    href=Cow::Borrowed("#button-group")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::ButtonGroup))
-                                />
-                                <MenuItem
-                                    text={html!("Callout")}
-                                    href=Cow::Borrowed("#callout")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Callout))
-                                />
-                                <MenuItem
-                                    text={html!("Card")}
-                                    href=Cow::Borrowed("#card")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Card))
-                                />
-                                <MenuItem
-                                    text={html!("Checkbox")}
-                                    href=Cow::Borrowed("#checkbox")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Checkbox))
-                                />
-                                <MenuItem
-                                    text={html!("Collapse")}
-                                    href=Cow::Borrowed("#collapse")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Collapse))
-                                />
-                                <MenuItem
-                                    text={html!("ControlGroup")}
-                                    href=Cow::Borrowed("#control-group")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::ControlGroup))
-                                    />
-                                <MenuItem
-                                    text={html!("Divider")}
-                                    href=Cow::Borrowed("#divider")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Divider))
-                                />
-                                <MenuItem
-                                    text={html!("HtmlSelect")}
-                                    href=Cow::Borrowed("#html-select")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::HtmlSelect))
-                                />
-                                <MenuItem
-                                    text={html!("Icon")}
-                                    href=Cow::Borrowed("#icon")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Icon))
-                                />
-                                <MenuItem
-                                    text={html!("InputGroup")}
-                                    href=Cow::Borrowed("#input-group")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::InputGroup))
-                                />
-                                <MenuItem
-                                    text={html!("Menu")}
-                                    href=Cow::Borrowed("#menu")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Menu))
-                                />
-                                <MenuItem
-                                    text={html!("NumericInput")}
-                                    href=Cow::Borrowed("#numeric-input")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::NumericInput))
-                                />
-                                <MenuItem
-                                    text={html!("PanelStack")}
-                                    href=Cow::Borrowed("#panel-stack")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::PanelStack))
-                                />
-                                <MenuItem
-                                    text={html!("ProgressBar")}
-                                    href=Cow::Borrowed("#progress-bar")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::ProgressBar))
-                                />
-                                <MenuItem
-                                    text={html!("Radio")}
-                                    href=Cow::Borrowed("#radio")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Radio))
-                                />
-                                <MenuItem
-                                    text={html!("Slider")}
-                                    href=Cow::Borrowed("#slider")
-                                    onclick=self.link.callback(|_| Msg::GoToMenu(DocMenu::Slider))
-                                />
-                                <MenuItem
-                                    text={html!("Spinner")}
-                                    href=Cow::Borrowed("#spinner")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Spinner))
-                                />
-                                <MenuItem
-                                    text={html!("Switch")}
-                                    href=Cow::Borrowed("#switch")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Switch))
-                                />
-                                <MenuItem
-                                    text={html!("Tabs")}
-                                    href=Cow::Borrowed("#tabs")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Tabs))
-                                />
-                                <MenuItem
-                                    text={html!("Tag")}
-                                    href=Cow::Borrowed("#tag")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Tag))
-                                />
-                                <MenuItem
-                                    text={html!("Text")}
-                                    href=Cow::Borrowed("#text")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Text))
-                                />
-                                <MenuItem
-                                    text={html!("TextArea")}
-                                    href=Cow::Borrowed("#textarea")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::TextArea))
-                                />
-                                <MenuItem
-                                    text={html!("Tree")}
-                                    href=Cow::Borrowed("#tree")
-                                    onclick=self.link
-                                        .callback(|_| Msg::GoToMenu(DocMenu::Tree))
-                                />
-                                // NOTE: thanks to keep this list of <MenuItem> sorted
-                                //       alphabetically (except for the light switch)
-                            </Menu>
-                            <div class="docs-nav-sponsors">
-                                <a href=Cow::Borrowed("https://www.netlify.com")>
-                                    <img
-                                        src=netlify_badge
-                                        alt="Deploys by Netlify"
-                                    />
-                                </a>
+        let menu = html! {
+            <Menu>
+                <MenuItem
+                    text={html!(go_to_theme_label)}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::ToggleLight)}
+                    icon={go_to_theme_icon}
+                />
+                <MenuItem
+                    text={html!("Button")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Button))}
+                />
+                <MenuItem
+                    text={html!("ButtonGroup")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::ButtonGroup))}
+                />
+                <MenuItem
+                    text={html!("Callout")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Callout))}
+                />
+                <MenuItem
+                    text={html!("Card")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Card))}
+                />
+                <MenuItem
+                    text={html!("Checkbox")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Checkbox))}
+                />
+                <MenuItem
+                    text={html!("Collapse")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Collapse))}
+                />
+                <MenuItem
+                    text={html!("ControlGroup")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::ControlGroup))}
+                    />
+                <MenuItem
+                    text={html!("Divider")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Divider))}
+                />
+                <MenuItem
+                    text={html!("HtmlSelect")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::HtmlSelect))}
+                />
+                <MenuItem
+                    text={html!("Icon")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Icon))}
+                />
+                <MenuItem
+                    text={html!("InputGroup")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::InputGroup))}
+                />
+                <MenuItem
+                    text={html!("Menu")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
+                />
+                <MenuItem
+                    text={html!("NumericInput")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::NumericInput))}
+                />
+                <MenuItem
+                    text={html!("PanelStack")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::PanelStack))}
+                />
+                <MenuItem
+                    text={html!("ProgressBar")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::ProgressBar))}
+                />
+                <MenuItem
+                    text={html!("Radio")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Radio))}
+                />
+                <MenuItem
+                    text={html!("Slider")}
+                    onclick={ctx.link().callback(|_| Msg::GoToMenu(DocMenu::Slider))}
+                />
+                <MenuItem
+                    text={html!("Spinner")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Spinner))}
+                />
+                <MenuItem
+                    text={html!("Switch")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Switch))}
+                />
+                <MenuItem
+                    text={html!("Tabs")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Tabs))}
+                />
+                <MenuItem
+                    text={html!("Tag")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Tag))}
+                />
+                <MenuItem
+                    text={html!("Text")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Text))}
+                />
+                <MenuItem
+                    text={html!("TextArea")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::TextArea))}
+                />
+                <MenuItem
+                    text={html!("Tree")}
+                    onclick={ctx.link()
+                        .callback(|_| Msg::GoToMenu(DocMenu::Tree))}
+                />
+                // NOTE: thanks to keep this list of <MenuItem> sorted
+                //       alphabetically (except for the light switch)
+            </Menu>
+        };
+
+        let navigation = html! {
+            <div class={classes!("docs-nav-wrapper")}>
+                <div class={classes!("docs-nav")}>
+                    <div class={classes!("docs-nav-title")}>
+                        <a class={classes!("docs-logo")} href="/">
+                            {crate::include_raw_html!("logo.svg")}
+                        </a>
+                        <div>
+                            <div class={classes!("bp3-navbar-heading", "docs-heading")}>
+                                {"Yewprint"}
                             </div>
+                            <a
+                                class={classes!("bp3-text-muted")}
+                                href="https://github.com/yewprint/yewprint"
+                                target="_blank"
+                            >
+                                <small>{"View on GitHub"}</small>
+                            </a>
                         </div>
                     </div>
-                    <main class=classes!("docs-content-wrapper") role="main">
-                        <div class=classes!("docs-page")>
-                            <Router<DocMenu, ()>
-                                render=Router::render(|switch: DocMenu| {
-                                    match switch {
-                                        DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
-                                        DocMenu::ButtonGroup => html! (<ButtonGroupDoc />),
-                                        DocMenu::Callout => html!(<CalloutDoc />),
-                                        DocMenu::Card => html!(<CardDoc />),
-                                        DocMenu::Checkbox => html!(<CheckboxDoc />),
-                                        DocMenu::Collapse => html!(<CollapseDoc />),
-                                        DocMenu::ControlGroup => html!(<ControlGroupDoc />),
-                                        DocMenu::Divider => html!(<DividerDoc />),
-                                        DocMenu::HtmlSelect => html!(<HtmlSelectDoc />),
-                                        DocMenu::Icon => html!(<IconDoc />),
-                                        DocMenu::InputGroup => html!(<InputGroupDoc />),
-                                        DocMenu::Menu => html!(<MenuDoc />),
-                                        DocMenu::NumericInput => html!(<NumericInputDoc />),
-                                        DocMenu::PanelStack => html!(<PanelStackDoc />),
-                                        DocMenu::ProgressBar => html!(<ProgressBarDoc />),
-                                        DocMenu::Radio => html!(<RadioDoc />),
-                                        DocMenu::Slider => html!(<SliderDoc />),
-                                        DocMenu::Spinner => html!(<SpinnerDoc />),
-                                        DocMenu::Switch => html!(<SwitchDoc />),
-                                        DocMenu::Tabs => html!(<TabsDoc />),
-                                        DocMenu::Tag => html!(<TagDoc />),
-                                        DocMenu::Text => html!(<TextDoc />),
-                                        DocMenu::TextArea => html!(<TextAreaDoc />),
-                                        DocMenu::Tree => html!(<TreeDoc />),
-                                    }
-                                })
+                    {{ menu }}
+                    <div class="docs-nav-sponsors">
+                        <a href={"https://www.netlify.com"}>
+                            <img
+                                src={netlify_badge}
+                                alt="Deploys by Netlify"
                             />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        };
+
+        html! {
+            <div class={classes!("docs-root", self.dark_theme.then(|| "bp3-dark"))}>
+                <div class={classes!("docs-app")}>
+                    {{ navigation }}
+                    <main class={classes!("docs-content-wrapper")} role="main">
+                        <div class={classes!("docs-page")}>
+                                <Switch<DocMenu> render={Switch::render(switch)} />
                         </div>
                     </main>
                 </div>
@@ -314,56 +268,85 @@ impl Component for App {
     }
 }
 
-#[derive(Debug, Copy, Clone, Switch)]
+fn switch(route: &DocMenu) -> Html {
+    match route {
+        DocMenu::Button | DocMenu::Home => html! (<ButtonDoc />),
+        DocMenu::ButtonGroup => html! (<ButtonGroupDoc />),
+        DocMenu::Callout => html!(<CalloutDoc />),
+        DocMenu::Card => html!(<CardDoc />),
+        DocMenu::Checkbox => html!(<CheckboxDoc />),
+        DocMenu::Collapse => html!(<CollapseDoc />),
+        DocMenu::ControlGroup => html!(<ControlGroupDoc />),
+        DocMenu::Divider => html!(<DividerDoc />),
+        DocMenu::HtmlSelect => html!(<HtmlSelectDoc />),
+        DocMenu::Icon => html!(<IconDoc />),
+        DocMenu::InputGroup => html!(<InputGroupDoc />),
+        DocMenu::Menu => html!(<MenuDoc />),
+        DocMenu::NumericInput => html!(<NumericInputDoc />),
+        DocMenu::PanelStack => html!(<PanelStackDoc />),
+        DocMenu::ProgressBar => html!(<ProgressBarDoc />),
+        DocMenu::Radio => html!(<RadioDoc />),
+        DocMenu::Slider => html!(<SliderDoc />),
+        DocMenu::Spinner => html!(<SpinnerDoc />),
+        DocMenu::Switch => html!(<SwitchDoc />),
+        DocMenu::Tabs => html!(<TabsDoc />),
+        DocMenu::Tag => html!(<TagDoc />),
+        DocMenu::Text => html!(<TextDoc />),
+        DocMenu::TextArea => html!(<TextAreaDoc />),
+        DocMenu::Tree => html!(<TreeDoc />),
+    }
+}
+
+#[derive(PartialEq, Clone, Routable)]
 pub enum DocMenu {
-    #[to = "/#button-group"]
+    #[at("/button-group")]
     ButtonGroup,
-    #[to = "/#button"]
+    #[at("/button")]
     Button,
-    #[to = "/#callout"]
+    #[at("/callout")]
     Callout,
-    #[to = "/#card"]
+    #[at("/card")]
     Card,
-    #[to = "/#checkbox"]
+    #[at("/checkbox")]
     Checkbox,
-    #[to = "/#collapse"]
+    #[at("/collapse")]
     Collapse,
-    #[to = "/#control-group"]
+    #[at("/control-group")]
     ControlGroup,
-    #[to = "/#html-select"]
+    #[at("/html-select")]
     HtmlSelect,
-    #[to = "/#divider"]
+    #[at("/divider")]
     Divider,
-    #[to = "/#icon"]
+    #[at("/icon")]
     Icon,
-    #[to = "/#input-group"]
+    #[at("/input-group")]
     InputGroup,
-    #[to = "/#menu"]
+    #[at("/menu")]
     Menu,
-    #[to = "/#numeric-input"]
+    #[at("/numeric-input")]
     NumericInput,
-    #[to = "/#panel-stack"]
+    #[at("/panel-stack")]
     PanelStack,
-    #[to = "/#progress-bar"]
+    #[at("/progress-bar")]
     ProgressBar,
-    #[to = "/#radio"]
+    #[at("/radio")]
     Radio,
-    #[to = "/#slider"]
+    #[at("/slider")]
     Slider,
-    #[to = "/#spinner"]
+    #[at("/spinner")]
     Spinner,
-    #[to = "/#switch"]
+    #[at("/switch")]
     Switch,
-    #[to = "/#tabs"]
+    #[at("/tabs")]
     Tabs,
-    #[to = "/#tag"]
+    #[at("/tag")]
     Tag,
-    #[to = "/#textarea"]
+    #[at("/textarea")]
     TextArea,
-    #[to = "/#text"]
+    #[at("/text")]
     Text,
-    #[to = "/#tree"]
+    #[at("/tree")]
     Tree,
-    #[to = "/"]
+    #[at("/")]
     Home,
 }
diff --git a/yewprint-doc/src/button_group/example.rs b/yewprint-doc/src/button_group/example.rs
index e50ce24..a3e289d 100644
--- a/yewprint-doc/src/button_group/example.rs
+++ b/yewprint-doc/src/button_group/example.rs
@@ -1,11 +1,6 @@
-use std::borrow::Cow;
 use yew::prelude::*;
 use yewprint::{Button, ButtonGroup, IconName};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub minimal: bool,
@@ -14,40 +9,19 @@ pub struct ExampleProps {
     pub vertical: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <ButtonGroup
-                minimal=self.props.minimal
-                fill=self.props.fill
-                large=self.props.large
-                vertical=self.props.vertical
-                style=Cow::Borrowed("margin:0;")
-            >
-                <Button icon=IconName::Database>{"Queries"}</Button>
-                <Button icon=IconName::Function>{"Functions"}</Button>
-                <Button icon=IconName::Cog>{"Options"}</Button>
-            </ButtonGroup>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <ButtonGroup
+            minimal={props.minimal}
+            fill={props.fill}
+            large={props.large}
+            vertical={props.vertical}
+            style={"margin:0;"}
+        >
+            <Button icon={IconName::Database}> {"Queries"}</Button>
+            <Button icon={IconName::Function}>{"Functions"}</Button>
+            <Button icon={IconName::Cog}>{"Options"}</Button>
+        </ButtonGroup>
     }
 }
diff --git a/yewprint-doc/src/button_group/mod.rs b/yewprint-doc/src/button_group/mod.rs
index d230958..9d04f92 100644
--- a/yewprint-doc/src/button_group/mod.rs
+++ b/yewprint-doc/src/button_group/mod.rs
@@ -14,9 +14,9 @@ impl Component for ButtonGroupDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         ButtonGroupDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 minimal: false,
                 fill: false,
@@ -26,16 +26,12 @@ impl Component for ButtonGroupDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -44,19 +40,19 @@ impl Component for ButtonGroupDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Button Group"}</H1>
+                <H1 class={classes!("docs-title")}>{"Button Group"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <ButtonGroupProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         >
                         </ButtonGroupProps>
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -65,41 +61,41 @@ impl Component for ButtonGroupDoc {
 
 crate::build_example_prop_component! {
     ButtonGroupProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         minimal: !props.minimal,
                         ..props
-                    })
-                    checked=self.props.minimal
-                    label=html!("Minimal")
+                    })}
+                    checked={ctx.props().example_props.minimal}
+                    label={html!("Minimal")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps{
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps{
                         fill: !props.fill,
                         ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
+                    })}
+                    checked={ctx.props().example_props.fill}
+                    label={html!("Fill")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps{
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps{
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         vertical: !props.vertical,
                         ..props
-                    })
-                    checked=self.props.vertical
-                    label=html!("Vertical")
+                    })}
+                    checked={ctx.props().example_props.vertical}
+                    label={html!("Vertical")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/buttons/example.rs b/yewprint-doc/src/buttons/example.rs
index bffe85b..a459c40 100644
--- a/yewprint-doc/src/buttons/example.rs
+++ b/yewprint-doc/src/buttons/example.rs
@@ -2,9 +2,7 @@ use yew::prelude::*;
 use yewprint::Button;
 
 pub struct Example {
-    link: ComponentLink<Self>,
     counter: i64,
-    props: ExampleProps,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -27,45 +25,32 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Example {
-            counter: 0,
-            link,
-            props,
-        }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Example { counter: 0 }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::AddOne => self.counter += 1,
         }
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <p>{"Counter: "}{self.counter}</p>
                 <div>
                     <Button
-                        onclick=self.link.callback(|_| Msg::AddOne)
-                        minimal=self.props.minimal
-                        fill=self.props.fill
-                        small=self.props.small
-                        outlined=self.props.outlined
-                        loading=self.props.loading
-                        large=self.props.large
-                        active=self.props.active
-                        disabled=self.props.disabled
+                        onclick={ctx.link().callback(|_| Msg::AddOne)}
+                        minimal={ctx.props().minimal}
+                        fill={ctx.props().fill}
+                        small={ctx.props().small}
+                        outlined={ctx.props().outlined}
+                        loading={ctx.props().loading}
+                        large={ctx.props().large}
+                        active={ctx.props().active}
+                        disabled={ctx.props().disabled}
                     >
                         {"Add 1"}
                     </Button>
diff --git a/yewprint-doc/src/buttons/mod.rs b/yewprint-doc/src/buttons/mod.rs
index 1f1cc45..7432553 100644
--- a/yewprint-doc/src/buttons/mod.rs
+++ b/yewprint-doc/src/buttons/mod.rs
@@ -14,9 +14,9 @@ impl Component for ButtonDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         ButtonDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 minimal: false,
                 fill: false,
@@ -30,37 +30,35 @@ impl Component for ButtonDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
             "bp3-code-block"
         );
 
+        let props_component = html! {
+            <ButtonProps
+                callback={self.callback.clone()}
+                example_props={example_props.clone()}
+            />
+        };
+
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Button"}</H1>
+                <H1 class={classes!("docs-title")}>{"Button"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
-                            <ButtonProps
-                                callback={self.callback.clone()}
-                                props=example_props.clone()
-                            />
-                        })
+                        source={source}
+                        props={Some(props_component)}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -70,77 +68,77 @@ impl Component for ButtonDoc {
 
 crate::build_example_prop_component! {
     ButtonProps for ExampleProps =>
-    fn view(&self) -> Html {
-        html! {
-            <div>
-                <H5>{"Props"}</H5>
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        minimal: !props.minimal,
-                        ..props
-                    })
-                    checked=self.props.minimal
-                    label=html!("Minimal")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        fill: !props.fill,
-                        ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        small: !props.small,
-                        ..props
-                    })
-                    checked=self.props.small
-                    label=html!("Small")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        outlined: !props.outlined,
-                        ..props
-                    })
-                    checked=self.props.outlined
-                    label=html!("Outlined")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        loading: !props.loading,
-                        ..props
-                    })
-                    checked=self.props.loading
-                    label=html!("Loading")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        large: !props.large,
-                        ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        active: !props.active,
-                        ..props
-                    })
-                    checked=self.props.active
-                    label=html!("Active")
-                />
-                <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
-                        disabled: !props.disabled,
-                        ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
-                />
-            </div>
+        fn view(&self, ctx: &Context<Self>) -> Html {
+            html! {
+                <div>
+                    <H5>{"Props"}</H5>
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            minimal: !props.minimal,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.minimal}
+                        label={html!("Minimal")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            fill: !props.fill,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.fill}
+                        label={html!("Fill")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            small: !props.small,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.small}
+                        label={html!("Small")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            outlined: !props.outlined,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.outlined}
+                        label={html!("Outlined")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            loading: !props.loading,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.loading}
+                        label={html!("Loading")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            large: !props.large,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.large}
+                        label={html!("Large")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            active: !props.active,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.active}
+                        label={html!("Active")}
+                    />
+                    <Switch
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
+                            disabled: !props.disabled,
+                            ..props
+                        })}
+                        checked={ctx.props().example_props.disabled}
+                        label={html!("Disabled")}
+                    />
+                </div>
+            }
         }
-    }
 }
 
 crate::build_source_code_component!();
diff --git a/yewprint-doc/src/callout/example.rs b/yewprint-doc/src/callout/example.rs
index 0fb5125..dab8d3d 100644
--- a/yewprint-doc/src/callout/example.rs
+++ b/yewprint-doc/src/callout/example.rs
@@ -1,11 +1,6 @@
-use std::borrow::Cow;
 use yew::prelude::*;
 use yewprint::{Callout, Intent};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub intent: Option<Intent>,
@@ -13,36 +8,15 @@ pub struct ExampleProps {
     pub show_title: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <Callout
-                title=self.props.show_title.then(|| Cow::Borrowed("Visually important content"))
-                without_icon=!self.props.show_icon
-                intent=self.props.intent
-            >
-                <p>{"The Callout element's background reflects its intent, if any."}</p>
-            </Callout>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <Callout
+            title={props.show_title.then(|| "Visually important content")}
+            without_icon={!props.show_icon}
+            intent={props.intent}
+        >
+            <p>{"The Callout element's background reflects its intent, if any."}</p>
+        </Callout>
     }
 }
diff --git a/yewprint-doc/src/callout/mod.rs b/yewprint-doc/src/callout/mod.rs
index 759936b..9cd0ecb 100644
--- a/yewprint-doc/src/callout/mod.rs
+++ b/yewprint-doc/src/callout/mod.rs
@@ -14,9 +14,9 @@ impl Component for CalloutDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         CalloutDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 show_icon: false,
                 intent: None,
@@ -25,16 +25,12 @@ impl Component for CalloutDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -43,18 +39,18 @@ impl Component for CalloutDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Callout"}</H1>
+                <H1 class={classes!("docs-title")}>{"Callout"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <CalloutProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -63,26 +59,26 @@ impl Component for CalloutDoc {
 
 crate::build_example_prop_component! {
     CalloutProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <div>
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                                 show_icon: !props.show_icon,
                                 ..props
-                            })
-                            checked=self.props.show_icon
-                            label=html!("Show/hide icon")
+                            })}
+                            checked={ctx.props().example_props.show_icon}
+                            label={html!("Show/hide icon")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                                 show_title: !props.show_title,
                                 ..props
-                            })
-                            checked=self.props.show_title
-                            label=html!("Show/hide title")
+                            })}
+                            checked={ctx.props().example_props.show_title}
+                            label={html!("Show/hide title")}
                         />
                         <p>{"Select intent:"}</p>
                         <HtmlSelect<Option<Intent>>
@@ -93,10 +89,10 @@ crate::build_example_prop_component! {
                                 (Some(Intent::Warning), "Warning".to_string()),
                                 (Some(Intent::Danger), "Danger".to_string()),
                             ]}
-                            onchange=self.update_props(|props, intent| ExampleProps {
+                            onchange={self.update_props(ctx.props(), |props, intent| ExampleProps {
                                 intent,
                                 ..props
-                            })
+                            })}
                         />
                     </div>
                 </div>
diff --git a/yewprint-doc/src/card/example.rs b/yewprint-doc/src/card/example.rs
index 73f705c..ad0b09d 100644
--- a/yewprint-doc/src/card/example.rs
+++ b/yewprint-doc/src/card/example.rs
@@ -1,47 +1,22 @@
 use yew::prelude::*;
 use yewprint::{Card, Elevation};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub elevation: Elevation,
     pub interactive: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <Card elevation=self.props.elevation interactive=self.props.interactive>
-                <p>
-                    {
-                        "This is a card component. The elevation of the card can be adjusted. \
-                        An interactive card reacts to being moused over."
-                    }
-                </p>
-            </Card>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <Card elevation={props.elevation} interactive={props.interactive}>
+            <p>
+                {
+                    "This is a card component. The elevation of the card can be adjusted. \
+                    An interactive card reacts to being moused over."
+                }
+            </p>
+        </Card>
     }
 }
diff --git a/yewprint-doc/src/card/mod.rs b/yewprint-doc/src/card/mod.rs
index f0fe465..d44e980 100644
--- a/yewprint-doc/src/card/mod.rs
+++ b/yewprint-doc/src/card/mod.rs
@@ -14,9 +14,9 @@ impl Component for CardDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         CardDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 elevation: Elevation::Level0,
                 interactive: false,
@@ -24,16 +24,12 @@ impl Component for CardDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,18 +38,18 @@ impl Component for CardDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Card"}</H1>
+                <H1 class={classes!("docs-title")}>{"Card"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <CardProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -62,18 +58,20 @@ impl Component for CardDoc {
 
 crate::build_example_prop_component! {
     CardProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
+            let props = ctx.props();
+
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <div>
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 interactive: !props.interactive,
                                 ..props
-                            })
-                            checked=self.props.interactive
-                            label=html!("Toggle interaction")
+                            })}
+                            checked={ctx.props().example_props.interactive}
+                            label={html!("Toggle interaction")}
                         />
                         <p>{"Elevation:"}</p>
                         <HtmlSelect<Elevation>
@@ -84,11 +82,11 @@ crate::build_example_prop_component! {
                                 (Elevation::Level3, "Level 3".to_string()),
                                 (Elevation::Level4, "Level 4".to_string()),
                             ]}
-                            value=self.props.elevation
-                            onchange=self.update_props(|props, elevation| ExampleProps {
+                            value={ctx.props().example_props.elevation}
+                            onchange={self.update_props(props, |props, elevation| ExampleProps {
                                 elevation,
                                 ..props
-                            })
+                            })}
                         />
                     </div>
                 </div>
diff --git a/yewprint-doc/src/checkbox/example.rs b/yewprint-doc/src/checkbox/example.rs
index e739ba1..00eede2 100644
--- a/yewprint-doc/src/checkbox/example.rs
+++ b/yewprint-doc/src/checkbox/example.rs
@@ -1,10 +1,6 @@
 use yew::prelude::*;
 use yewprint::{Checkbox, Label};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub disabled: bool,
@@ -12,50 +8,29 @@ pub struct ExampleProps {
     pub large: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div>
-                <Label>{"Assign responsability"}</Label>
-                <Checkbox
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!("Gilad Gray")
-                />
-                <Checkbox
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!("Jason Killian")
-                />
-                <Checkbox
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!("Antoine Llorca")
-                />
-            </div>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <div>
+            <Label>{"Assign responsability"}</Label>
+            <Checkbox
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                label={html!("Gilad Gray")}
+            />
+            <Checkbox
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                label={html!("Jason Killian")}
+            />
+            <Checkbox
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                label={html!("Antoine Llorca")}
+            />
+        </div>
     }
 }
diff --git a/yewprint-doc/src/checkbox/mod.rs b/yewprint-doc/src/checkbox/mod.rs
index 39aad57..6b9d128 100644
--- a/yewprint-doc/src/checkbox/mod.rs
+++ b/yewprint-doc/src/checkbox/mod.rs
@@ -14,9 +14,9 @@ impl Component for CheckboxDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         CheckboxDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 disabled: false,
                 inline: false,
@@ -25,16 +25,12 @@ impl Component for CheckboxDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -43,18 +39,18 @@ impl Component for CheckboxDoc {
 
         html! {
             <div>
-            <H1 class=classes!("docs-title")>{"Checkbox"}</H1>
+            <H1 class={classes!("docs-title")}>{"Checkbox"}</H1>
             <SourceCodeUrl />
             <ExampleContainer
-                source=source
-                props=Some(html! {
+                source={source}
+                props={Some(html! {
                     <CheckboxProps
                         callback={self.callback.clone()}
-                        props=example_props.clone()
+                        example_props={example_props.clone()}
                     />
-                })
+                })}
             >
-                <Example with example_props />
+                <Example ..example_props />
             </ExampleContainer>
             </div>
         }
@@ -63,33 +59,33 @@ impl Component for CheckboxDoc {
 
 crate::build_example_prop_component! {
     CheckboxProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         inline: !props.inline,
                         ..props
-                    })
-                    checked=self.props.inline
-                    label=html!("Inline")
+                    })}
+                    checked={ctx.props().example_props.inline}
+                    label={html!("Inline")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/collapse/example.rs b/yewprint-doc/src/collapse/example.rs
index cd3e741..fb6bbe7 100644
--- a/yewprint-doc/src/collapse/example.rs
+++ b/yewprint-doc/src/collapse/example.rs
@@ -2,7 +2,6 @@ use yew::prelude::*;
 use yewprint::{Button, Collapse};
 
 pub struct Example {
-    link: ComponentLink<Self>,
     collapsed: bool,
 }
 
@@ -14,34 +13,27 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Example {
-            collapsed: true,
-            link,
-        }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Example { collapsed: true }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ToggleCollapse => self.collapsed ^= true,
         }
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let logs = include_str!("example.log");
 
         html! {
             <div>
-                <Button onclick=self.link.callback(|_| Msg::ToggleCollapse)>
+                <Button onclick={ctx.link().callback(|_| Msg::ToggleCollapse)}>
                     {"Toggle collapse"}
                 </Button>
                 <Collapse
-                    is_open=!self.collapsed
+                    is_open={!self.collapsed}
                     keep_children_mounted=true
                 >
                     <pre class="bp3-code-block">
diff --git a/yewprint-doc/src/collapse/mod.rs b/yewprint-doc/src/collapse/mod.rs
index 63e19e6..69a705f 100644
--- a/yewprint-doc/src/collapse/mod.rs
+++ b/yewprint-doc/src/collapse/mod.rs
@@ -11,19 +11,15 @@ impl Component for CollapseDoc {
     type Message = ();
     type Properties = ();
 
-    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         CollapseDoc
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
             "bp3-code-block"
@@ -31,9 +27,9 @@ impl Component for CollapseDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Collapse"}</H1>
+                <H1 class={classes!("docs-title")}>{"Collapse"}</H1>
                 <SourceCodeUrl />
-                <ExampleContainer source=source>
+                <ExampleContainer source={source}>
                     <Example />
                 </ExampleContainer>
             </div>
diff --git a/yewprint-doc/src/control_group/example.rs b/yewprint-doc/src/control_group/example.rs
index d365e40..4b4cd61 100644
--- a/yewprint-doc/src/control_group/example.rs
+++ b/yewprint-doc/src/control_group/example.rs
@@ -1,56 +1,31 @@
 use yew::prelude::*;
 use yewprint::{Button, ControlGroup, HtmlSelect, IconName, InputGroup};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub fill: bool,
     pub vertical: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <ControlGroup
-                fill=self.props.fill
-                vertical=self.props.vertical
-            >
-                <HtmlSelect<Option<Sorting>>
-                    options={vec![
-                        (None, "Filter".to_string()),
-                        (Some(Sorting::NameAscending), "Name - ascending".to_string()),
-                        (Some(Sorting::NameDescending), "Name - descending".to_string()),
-                        (Some(Sorting::PriceAscending), "Price - ascending".to_string()),
-                        (Some(Sorting::PriceDescending), "Price - descending".to_string()),
-                    ]}
-                />
-                <InputGroup placeholder="Find filters..." />
-                <Button icon=IconName::ArrowRight />
-            </ControlGroup>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <ControlGroup
+            fill={props.fill}
+            vertical={props.vertical}
+        >
+            <HtmlSelect<Option<Sorting>>
+                options={vec![
+                    (None, "Filter".to_string()),
+                    (Some(Sorting::NameAscending), "Name - ascending".to_string()),
+                    (Some(Sorting::NameDescending), "Name - descending".to_string()),
+                    (Some(Sorting::PriceAscending), "Price - ascending".to_string()),
+                    (Some(Sorting::PriceDescending), "Price - descending".to_string()),
+                ]}
+            />
+            <InputGroup placeholder="Find filters..." />
+            <Button icon={IconName::ArrowRight} />
+        </ControlGroup>
     }
 }
 
diff --git a/yewprint-doc/src/control_group/mod.rs b/yewprint-doc/src/control_group/mod.rs
index 48455af..eb23ef6 100644
--- a/yewprint-doc/src/control_group/mod.rs
+++ b/yewprint-doc/src/control_group/mod.rs
@@ -14,9 +14,9 @@ impl Component for ControlGroupDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         ControlGroupDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 fill: false,
                 vertical: false,
@@ -24,16 +24,12 @@ impl Component for ControlGroupDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,19 +38,19 @@ impl Component for ControlGroupDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"ControlGroup"}</H1>
+                <H1 class={classes!("docs-title")}>{"ControlGroup"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <ControlGroupProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         >
                         </ControlGroupProps>
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -63,25 +59,25 @@ impl Component for ControlGroupDoc {
 
 crate::build_example_prop_component! {
     ControlGroupProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         fill: !props.fill,
                         ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
+                    })}
+                    checked={ctx.props().example_props.fill}
+                    label={html!("Fill")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         vertical: !props.vertical,
                         ..props
-                    })
-                    checked=self.props.vertical
-                    label=html!("Vertical")
+                    })}
+                    checked={ctx.props().example_props.vertical}
+                    label={html!("Vertical")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/divider/example.rs b/yewprint-doc/src/divider/example.rs
index 855bc15..20bff77 100644
--- a/yewprint-doc/src/divider/example.rs
+++ b/yewprint-doc/src/divider/example.rs
@@ -1,48 +1,22 @@
 use yew::prelude::*;
 use yewprint::{Button, ButtonGroup, Divider};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub vertical: bool,
 }
-
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <ButtonGroup vertical=self.props.vertical>
-                <Button>{"File"}</Button>
-                <Button>{"Edit"}</Button>
-                <Divider vertical=self.props.vertical />
-                <Button>{"Create"}</Button>
-                <Button>{"Delete"}</Button>
-                <Divider vertical=self.props.vertical />
-                // <Button icon=IconName::Add />
-                // <Button icon=IconName::Remove />
-            </ButtonGroup>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <ButtonGroup vertical={props.vertical}>
+            <Button>{"File"}</Button>
+            <Button>{"Edit"}</Button>
+            <Divider vertical={props.vertical} />
+            <Button>{"Create"}</Button>
+            <Button>{"Delete"}</Button>
+            <Divider vertical={props.vertical} />
+            // <Button icon=IconName::Add />
+            // <Button icon=IconName::Remove />
+        </ButtonGroup>
     }
 }
diff --git a/yewprint-doc/src/divider/mod.rs b/yewprint-doc/src/divider/mod.rs
index aaa8bd3..98b6051 100644
--- a/yewprint-doc/src/divider/mod.rs
+++ b/yewprint-doc/src/divider/mod.rs
@@ -14,23 +14,19 @@ impl Component for DividerDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         DividerDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps { vertical: false },
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -39,18 +35,18 @@ impl Component for DividerDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Divider"}</H1>
+                <H1 class={classes!("docs-title")}>{"Divider"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <DividerProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -59,16 +55,16 @@ impl Component for DividerDoc {
 
 crate::build_example_prop_component! {
     DividerProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             vertical: !props.vertical
-                        })
-                        checked=self.props.vertical
-                        label=html!("Vertical")
+                        })}
+                        checked={ctx.props().example_props.vertical}
+                        label={html!("Vertical")}
                     />
             </div>
         }
diff --git a/yewprint-doc/src/example.rs b/yewprint-doc/src/example.rs
index 6c072c9..91354cf 100644
--- a/yewprint-doc/src/example.rs
+++ b/yewprint-doc/src/example.rs
@@ -3,8 +3,6 @@ use yewprint::{Button, Collapse, IconName, Intent};
 
 pub struct ExampleContainer {
     collapsed: bool,
-    props: ExampleContainerProps,
-    link: ComponentLink<Self>,
 }
 
 pub enum Msg {
@@ -23,41 +21,28 @@ impl Component for ExampleContainer {
     type Message = Msg;
     type Properties = ExampleContainerProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        ExampleContainer {
-            collapsed: true,
-            props,
-            link,
-        }
+    fn create(_ctx: &Context<Self>) -> Self {
+        ExampleContainer { collapsed: true }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ToggleSource => self.collapsed ^= true,
         }
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <div class=classes!("docs-example-wrapper")>
-                <div class=classes!("docs-example-frame", "docs-example-frame-row")>
-                    <div class=classes!("docs-example")>
-                        {self.props.children.clone()}
+            <div class={classes!("docs-example-wrapper")}>
+                <div class={classes!("docs-example-frame", "docs-example-frame-row")}>
+                    <div class={classes!("docs-example")}>
+                        {ctx.props().children.clone()}
                     </div>
                     {
-                        if let Some(props) = self.props.props.clone() {
+                        if let Some(props) = ctx.props().props.clone() {
                             html! {
-                                <div class=classes!("docs-example-options")>
+                                <div class={classes!("docs-example-options")}>
                                     {props}
                                 </div>
                             }
@@ -66,21 +51,21 @@ impl Component for ExampleContainer {
                         }
                     }
                 </div>
-                <div class=classes!("docs-source")>
+                <div class={classes!("docs-source")}>
                     <Button
-                        icon=IconName::Code
-                        fill={true}
-                        intent={Intent::Primary}
-                        minimal={true}
-                        onclick=self.link.callback(|_| Msg::ToggleSource)
+                        icon={IconName::Code}
+                        fill={{true}}
+                        intent={{Intent::Primary}}
+                        minimal={{true}}
+                        onclick={ctx.link().callback(|_| Msg::ToggleSource)}
                     >
                         {"View source"}
                     </Button>
                     <Collapse
-                        is_open=!self.collapsed
+                        is_open={!self.collapsed}
                         keep_children_mounted=true
                     >
-                        {self.props.source.clone()}
+                        {ctx.props().source.clone()}
                     </Collapse>
                 </div>
             </div>
@@ -88,47 +73,40 @@ impl Component for ExampleContainer {
     }
 }
 
+/// The macro generates the component that will be used to render the editable
+/// properties of an associated example.
 #[macro_export]
 macro_rules! build_example_prop_component {
     ($name:ident for $prop_component:ty => $($view:tt)*) => {
         #[derive(Clone, PartialEq, Properties)]
         pub struct $name {
             callback: Callback<$prop_component>,
-            props: $prop_component,
+            example_props: $prop_component
         }
 
         impl Component for $name {
             type Message = ();
             type Properties = Self;
 
-            fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-                props
-            }
-
-            fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-                true
-            }
-
-            fn change(&mut self, props: Self::Properties) -> ShouldRender {
-                if self.props != props.props || self.callback != props.callback {
-                    self.props = props.props;
-                    self.callback = props.callback;
-                    true
-                } else {
-                    false
-                }
+            fn create(ctx: &Context<Self>) -> Self {
+                ctx.props().clone()
             }
 
             $($view)*
         }
 
         impl $name {
+            /// Propagate the prop changes to the parent so the example is
+            /// re-rendered.
             fn update_props<T>(
                 &self,
+                props: &Self,
                 updater: impl Fn($prop_component, T) -> $prop_component + 'static,
             ) -> Callback<T> {
-                let props = self.props.clone();
-                self.callback.clone().reform(move |event| updater(props.clone(), event))
+                let example_props = props.example_props.clone();
+                self.callback
+                    .clone()
+                    .reform(move |event| updater(example_props.clone(), event))
             }
         }
     };
diff --git a/yewprint-doc/src/html_select/example.rs b/yewprint-doc/src/html_select/example.rs
index 469d9c0..f8fb5c5 100644
--- a/yewprint-doc/src/html_select/example.rs
+++ b/yewprint-doc/src/html_select/example.rs
@@ -2,8 +2,6 @@ use yew::prelude::*;
 use yewprint::{HtmlSelect, Text};
 
 pub struct Example {
-    props: ExampleProps,
-    link: ComponentLink<Self>,
     log_level: LogLevel,
 }
 
@@ -19,29 +17,18 @@ impl Component for Example {
     type Message = LogLevel;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            props,
-            link,
             log_level: LogLevel::Info,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.log_level = msg;
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div style="width: 400px; text-align: center;">
                 <HtmlSelect<LogLevel>
@@ -53,13 +40,13 @@ impl Component for Example {
                         (LogLevel::Error, "ERROR".to_string()),
                         (LogLevel::Off, "OFF".to_string()),
                     ]}
-                    minimal=self.props.minimal
-                    fill=self.props.fill
-                    disabled=self.props.disabled
-                    large=self.props.large
-                    value=Some(self.log_level)
-                    onchange=self.link.callback(|x| x)
-                    title=format!("Selected: {:?}", self.log_level)
+                    minimal={ctx.props().minimal}
+                    fill={ctx.props().fill}
+                    disabled={ctx.props().disabled}
+                    large={ctx.props().large}
+                    value={Some(self.log_level)}
+                    onchange={ctx.link().callback(|x| x)}
+                    title={format!("Selected: {:?}", self.log_level)}
                 />
                 <Text>{format!("Selected: {:?}", self.log_level)}</Text>
             </div>
diff --git a/yewprint-doc/src/html_select/mod.rs b/yewprint-doc/src/html_select/mod.rs
index cb307e1..a12a61a 100644
--- a/yewprint-doc/src/html_select/mod.rs
+++ b/yewprint-doc/src/html_select/mod.rs
@@ -14,9 +14,9 @@ impl Component for HtmlSelectDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         HtmlSelectDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 minimal: false,
                 fill: false,
@@ -26,16 +26,12 @@ impl Component for HtmlSelectDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -44,19 +40,19 @@ impl Component for HtmlSelectDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"HtmlSelect"}</H1>
+                <H1 class={classes!("docs-title")}>{"HtmlSelect"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <HtmlSelectProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -66,41 +62,41 @@ impl Component for HtmlSelectDoc {
 
 crate::build_example_prop_component! {
     HtmlSelectProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         minimal: !props.minimal,
                         ..props
-                    })
-                    checked=self.props.minimal
-                    label=html!("Minimal")
+                    })}
+                    checked={ctx.props().example_props.minimal}
+                    label={html!("Minimal")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps{
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps{
                         fill: !props.fill,
                         ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
+                    })}
+                    checked={ctx.props().example_props.fill}
+                    label={html!("Fill")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps{
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps{
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
             </div>
             }
diff --git a/yewprint-doc/src/icon/example.rs b/yewprint-doc/src/icon/example.rs
index 6662588..2386ed7 100644
--- a/yewprint-doc/src/icon/example.rs
+++ b/yewprint-doc/src/icon/example.rs
@@ -1,26 +1,11 @@
 use yew::prelude::*;
 use yewprint::{Icon, IconName};
 
-pub struct Example {}
-
-impl Component for Example {
-    type Message = ();
-    type Properties = ();
-
-    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example {}
-    }
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-    fn view(&self) -> Html {
-        html! {
-            <div>
-                <Icon icon=IconName::Print />
-            </div>
-        }
+#[function_component(Example)]
+pub fn example() -> Html {
+    html! {
+        <div>
+            <Icon icon={IconName::Print} />
+        </div>
     }
 }
diff --git a/yewprint-doc/src/icon/mod.rs b/yewprint-doc/src/icon/mod.rs
index 4252f41..e3667c1 100644
--- a/yewprint-doc/src/icon/mod.rs
+++ b/yewprint-doc/src/icon/mod.rs
@@ -11,19 +11,15 @@ impl Component for IconDoc {
     type Message = ();
     type Properties = ();
 
-    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         IconDoc
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
             "bp3-code-block"
@@ -31,9 +27,9 @@ impl Component for IconDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Icon"}</H1>
+                <H1 class={classes!("docs-title")}>{"Icon"}</H1>
                 <SourceCodeUrl />
-                <ExampleContainer source=source>
+                <ExampleContainer source={source}>
                     <Example />
                 </ExampleContainer>
             </div>
diff --git a/yewprint-doc/src/input_group/example.rs b/yewprint-doc/src/input_group/example.rs
index 9753d51..031f1e1 100644
--- a/yewprint-doc/src/input_group/example.rs
+++ b/yewprint-doc/src/input_group/example.rs
@@ -1,9 +1,9 @@
+use gloo::dialogs::alert;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yewprint::{Button, IconName, InputGroup, Tag};
 
 pub struct Example {
-    link: ComponentLink<Self>,
-    props: ExampleProps,
     histogram_value: String,
     password_value: String,
     password_strength: Html,
@@ -29,22 +29,12 @@ pub enum Msg {
     Noop,
 }
 
-macro_rules! alert {
-    ($($arg:tt)*) => {
-        yew::services::DialogService::alert(&format!(
-            $($arg)*
-        ))
-    };
-}
-
 impl Component for Example {
     type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            props,
-            link,
             histogram_value: Default::default(),
             password_value: Default::default(),
             password_strength: Default::default(),
@@ -52,10 +42,10 @@ impl Component for Example {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> bool {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::AddHistogramEntry => {
-                alert!("You sent: {}", self.histogram_value);
+                alert(&format!("You sent: {}", self.histogram_value));
                 self.histogram_value = Default::default();
                 true
             }
@@ -64,7 +54,7 @@ impl Component for Example {
                 true
             }
             Msg::AddPasswordEntry => {
-                alert!("You sent: {}", self.password_value);
+                alert(&format!("You sent: {}", self.password_value));
                 self.password_value = Default::default();
                 true
             }
@@ -81,7 +71,7 @@ impl Component for Example {
                 true
             }
             Msg::AddTagsEntry => {
-                alert!("You sent: {}", self.tags_value);
+                alert(&format!("You sent: {}", self.tags_value));
                 self.tags_value = Default::default();
                 true
             }
@@ -93,74 +83,76 @@ impl Component for Example {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
                 <InputGroup
-                    fill=self.props.fill
-                    large=self.props.large
-                    small=self.props.small
-                    round=self.props.round
-                    disabled=self.props.disabled
-                    left_icon=IconName::Filter
+                    fill={ctx.props().fill}
+                    large={ctx.props().large}
+                    small={ctx.props().small}
+                    round={ctx.props().round}
+                    disabled={ctx.props().disabled}
+                    left_icon={IconName::Filter}
                     placeholder={"Filter histogram..."}
-                    value=self.histogram_value.clone()
-                    oninput=self.link.callback(|e: InputData| Msg::UpdateHistogram(e.value))
-                    onkeydown=self.link.callback(|e: KeyboardEvent| {
+                    value={self.histogram_value.clone()}
+                    oninput={ctx.link().callback(|e: InputEvent| {
+                        let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                        Msg::UpdateHistogram(value)
+                    })}
+                    onkeydown={ctx.link().callback(|e: KeyboardEvent| {
                         if e.key() == "Enter" { Msg::AddHistogramEntry } else { Msg::Noop }
-                    })
+                    })}
                 />
                 <InputGroup
-                    fill=self.props.fill
-                    large=self.props.large
-                    small=self.props.small
-                    round=self.props.round
-                    disabled=self.props.disabled
-                    left_element=self.password_strength.clone()
+                    fill={ctx.props().fill}
+                    large={ctx.props().large}
+                    small={ctx.props().small}
+                    round={ctx.props().round}
+                    disabled={ctx.props().disabled}
+                    left_element={self.password_strength.clone()}
                     placeholder={"Enter your password..."}
-                    value=self.password_value.clone()
-                    oninput=self.link.callback(|e: InputData| Msg::UpdatePassword(e.value))
-                    onkeydown=self.link.callback(|e: KeyboardEvent| {
+                    value={self.password_value.clone()}
+                    oninput={ctx.link().callback(|e: InputEvent| {
+                        let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                        Msg::UpdatePassword(value)
+                    })}
+                    onkeydown={ctx.link().callback(|e: KeyboardEvent| {
                         if e.key() == "Enter" { Msg::AddPasswordEntry } else { Msg::Noop }
-                    })
-                    right_element=html! {
+                    })}
+                    right_element={{ html! {
                         <Button
-                            icon=IconName::Lock
-                            minimal=true
-                            disabled=self.props.disabled
+                            icon={IconName::Lock}
+                            minimal={true}
+                            disabled={ctx.props().disabled}
                         />
-                    }
+                    }}}
                 />
                 <InputGroup
-                    fill=self.props.fill
-                    large=self.props.large
-                    small=self.props.small
-                    round=self.props.round
-                    disabled=self.props.disabled
-                    left_icon=IconName::Tag
+                    fill={ctx.props().fill}
+                    large={ctx.props().large}
+                    small={ctx.props().small}
+                    round={ctx.props().round}
+                    disabled={ctx.props().disabled}
+                    left_icon={IconName::Tag}
                     placeholder={"Find tags"}
-                    value=self.tags_value.clone()
-                    oninput=self.link.callback(|e: InputData| Msg::UpdateTags(e.value))
-                    onkeydown=self.link.callback(|e: KeyboardEvent| {
+                    value={self.tags_value.clone()}
+                    oninput={ctx.link().callback(|e: InputEvent| {
+                        let value = e.target_unchecked_into::<HtmlInputElement>().value();
+                        Msg::UpdateTags(value)
+                    })}
+                    onkeydown={ctx.link().callback(|e: KeyboardEvent| {
                         if e.key() == "Enter" { Msg::AddTagsEntry } else { Msg::Noop }
-                    })
-                    right_element=html! {
-                        <Tag
-                            minimal=true
-                            round=self.props.round
-                        >
-                            {{10000 / 1.max(self.tags_value.len().pow(2))}}
-                        </Tag>
-                    }
+                    })}
+                    right_element={{
+                        html!{
+                            <Tag
+                                minimal={true}
+                                round={ctx.props().round}
+                            >
+                                { (10000 / 1.max(self.tags_value.len().pow(2))).to_string() }
+                            </Tag>
+                        }
+                    }}
                 />
             </>
         }
diff --git a/yewprint-doc/src/input_group/mod.rs b/yewprint-doc/src/input_group/mod.rs
index e6eb566..c005e49 100644
--- a/yewprint-doc/src/input_group/mod.rs
+++ b/yewprint-doc/src/input_group/mod.rs
@@ -14,9 +14,9 @@ impl Component for InputGroupDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         InputGroupDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 disabled: false,
                 fill: false,
@@ -27,16 +27,12 @@ impl Component for InputGroupDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -45,19 +41,19 @@ impl Component for InputGroupDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"InputGroup"}</H1>
+                <H1 class={classes!("docs-title")}>{"InputGroup"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <InputGroupProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         >
                         </InputGroupProps>
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -66,49 +62,49 @@ impl Component for InputGroupDoc {
 
 crate::build_example_prop_component! {
     InputGroupProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         fill: !props.fill,
                         ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
+                    })}
+                    checked={ctx.props().example_props.fill}
+                    label={html!("Fill")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         small: !props.small,
                         ..props
-                    })
-                    checked=self.props.small
-                    label=html!("Small")
+                    })}
+                    checked={ctx.props().example_props.small}
+                    label={html!("Small")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         round: !props.round,
                         ..props
-                    })
-                    checked=self.props.round
-                    label=html!("Round")
+                    })}
+                    checked={ctx.props().example_props.round}
+                    label={html!("Round")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/lib.rs b/yewprint-doc/src/lib.rs
index 116769c..adf9b91 100644
--- a/yewprint-doc/src/lib.rs
+++ b/yewprint-doc/src/lib.rs
@@ -32,17 +32,10 @@ pub use app::*;
 pub use example::*;
 pub use logo::*;
 
-#[macro_export]
-macro_rules! log {
-    ($s:expr $(,$args:expr)*) => {{
-        yew::services::ConsoleService::log(format!($s $(,$args)*).as_str());
-    }};
-}
-
 #[macro_export]
 macro_rules! include_raw_html {
     ($file:expr $(, $class:expr)?) => {{
-        yew::virtual_dom::VNode::VRef(yew::web_sys::Node::from({
+        yew::virtual_dom::VNode::VRef(web_sys::Node::from({
             let div = web_sys::window()
                 .unwrap()
                 .document()
@@ -88,27 +81,23 @@ macro_rules! build_source_code_component {
             type Message = ();
             type Properties = ();
 
-            fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+            fn create(_ctx: &Context<Self>) -> Self {
                 let url = SourceCodeUrl::generate_url();
 
                 Self { url }
             }
 
-            fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+            fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
                 true
             }
 
-            fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-                true
-            }
-
-            fn view(&self) -> Html {
+            fn view(&self, _ctx: &Context<Self>) -> Html {
                 use yewprint::Text;
 
                 html! {
                     <a
-                        class=classes!("bp3-text-muted")
-                        href=self.url.clone()
+                        class={classes!("bp3-text-muted")}
+                        href={self.url.clone()}
                         target="_blank"
                     >
                         <Text>{"Go to source code"}</Text>
@@ -142,7 +131,7 @@ static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 pub fn run_app() -> Result<(), wasm_bindgen::JsValue> {
     #[cfg(feature = "console_error_panic_hook")]
     console_error_panic_hook::set_once();
-    yew::start_app::<app::App>();
+    yew::start_app::<app::AppRoot>();
 
     Ok(())
 }
diff --git a/yewprint-doc/src/logo.rs b/yewprint-doc/src/logo.rs
index 047a2c9..f5ea68a 100644
--- a/yewprint-doc/src/logo.rs
+++ b/yewprint-doc/src/logo.rs
@@ -1,37 +1,12 @@
 use yew::prelude::*;
 
-pub struct Logo {
-    props: LogoProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct LogoProps {
     #[prop_or_default]
     pub class: Classes,
 }
 
-impl Component for Logo {
-    type Message = ();
-    type Properties = LogoProps;
-
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Self { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        todo!()
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if props != self.props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        crate::include_raw_html!("logo.svg", &self.props.class.to_string())
-    }
+#[function_component(Logo)]
+pub fn logo(props: &LogoProps) -> Html {
+    crate::include_raw_html!("logo.svg", &props.class.to_string())
 }
diff --git a/yewprint-doc/src/menu/example.rs b/yewprint-doc/src/menu/example.rs
index e145232..e9504a0 100644
--- a/yewprint-doc/src/menu/example.rs
+++ b/yewprint-doc/src/menu/example.rs
@@ -1,11 +1,8 @@
 use crate::{DocMenu, Logo};
-use std::borrow::Cow;
 use yew::prelude::*;
 use yewprint::{Icon, IconName, Menu, MenuDivider, MenuItem};
 
-pub struct Example {
-    link: ComponentLink<Self>,
-}
+pub struct Example {}
 
 pub enum Msg {
     GoToMenu(DocMenu),
@@ -15,107 +12,106 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { link }
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {}
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let custom_icon = html! {
+            <Logo class={classes!("custom-icon")} />
+        };
+
+        let share_icon = html! {
+            <Icon icon={IconName::Share} />
+        };
 
-    fn view(&self) -> Html {
         html! {
             <>
                 <Menu>
                     <MenuItem
                         text={html!("Custom SVG icon")}
-                        icon_html=html! {
-                            <Logo class=classes!("custom-icon") />
-                        }
+                        icon_html={custom_icon}
                     />
                     <MenuDivider />
                     <MenuItem
-                        icon=IconName::NewTextBox
-                        text={html!{"New text box"}}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        icon={IconName::NewTextBox}
+                        text={html!("New text box")}
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::NewObject
-                        text={html!{"New object"}}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        icon={IconName::NewObject}
+                        text={html!("New object")}
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::NewLink
-                        text={html!{"New link"}}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        icon={IconName::NewLink}
+                        text={html!("New link")}
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuDivider />
                     <MenuItem
-                        icon=IconName::Cog
-                        text={html!{"Settings"}}
-                        label=html! {
-                            <Icon icon=IconName::Share />
-                        }
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        icon={IconName::Cog}
+                        text={html!("Settings")}
+                        label={share_icon}
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                 </Menu>
                 <Menu>
                     <MenuDivider title={html!("Edit")} />
                     <MenuItem
-                        icon=IconName::Cut
+                        icon={IconName::Cut}
                         text={html!("Cut")}
                         label={html!("Ctrl+X")}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::Duplicate
+                        icon={IconName::Duplicate}
                         text={html!("Copy")}
                         label={html!("Ctrl+C")}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::Clipboard
+                        icon={IconName::Clipboard}
                         text={html!("Paste")}
                         label={html!("Ctrl+V")}
                         disabled=true
                     />
                     <MenuDivider title={html!("Text")} />
                     <MenuItem
-                        icon=IconName::AlignLeft
+                        icon={IconName::AlignLeft}
                         text={html!("Alignment")}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::Style
+                        icon={IconName::Style}
                         text={html!("Style")}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        href={"#menu"}
+                        onclick={ctx.link()
+                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                     <MenuItem
-                        icon=IconName::Asterisk
+                        icon={IconName::Asterisk}
                         text={html!("Miscellaneous")}
-                        href=Cow::Borrowed("#menu")
-                        onclick=self.link
-                            .callback(|_| Msg::GoToMenu(DocMenu::Menu))
+                        href={"#menu"}
+                        onclick={ctx.link().callback(|_| Msg::GoToMenu(DocMenu::Menu))}
                     />
                 </Menu>
             </>
diff --git a/yewprint-doc/src/menu/mod.rs b/yewprint-doc/src/menu/mod.rs
index f204e2e..3504f00 100644
--- a/yewprint-doc/src/menu/mod.rs
+++ b/yewprint-doc/src/menu/mod.rs
@@ -11,19 +11,15 @@ impl Component for MenuDoc {
     type Message = ();
     type Properties = ();
 
-    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         MenuDoc
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
             "bp3-code-block"
@@ -31,9 +27,9 @@ impl Component for MenuDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Menu"}</H1>
+                <H1 class={classes!("docs-title")}>{"Menu"}</H1>
                 <SourceCodeUrl />
-                <ExampleContainer source=source>
+                <ExampleContainer source={source}>
                     <Example />
                 </ExampleContainer>
             </div>
diff --git a/yewprint-doc/src/numeric_input/example.rs b/yewprint-doc/src/numeric_input/example.rs
index 3c4e858..50067ae 100644
--- a/yewprint-doc/src/numeric_input/example.rs
+++ b/yewprint-doc/src/numeric_input/example.rs
@@ -1,10 +1,7 @@
-use std::borrow::Cow;
 use yew::prelude::*;
 use yewprint::{Button, Callout, IconName, Intent, NumericInput};
 
 pub struct Example {
-    props: ExampleProps,
-    link: ComponentLink<Self>,
     value: i32,
     value_two: i32,
 }
@@ -29,16 +26,14 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            props,
-            link,
             value: 0,
             value_two: 0,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::Reset => {
                 self.value = 4;
@@ -54,52 +49,43 @@ impl Component for Example {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
             <NumericInput<i32>
-                disabled=self.props.disabled
-                fill=self.props.large
-                value=self.value
+                disabled={ctx.props().disabled}
+                fill={ctx.props().large}
+                value={self.value}
                 bounds={-105..}
                 increment=10
-                placeholder=String::from("Greater or equal to -105...")
-                onchange=self.link.callback(|x| Msg::UpdateValue(x))
-                disable_buttons=self.props.disable_buttons
-                buttons_on_the_left=self.props.buttons_on_the_left
-                left_icon=self.props.left_icon.then(|| IconName::Dollar)
+                placeholder={String::from("Greater or equal to -105...")}
+                onchange={ctx.link().callback(|x| Msg::UpdateValue(x))}
+                disable_buttons={ctx.props().disable_buttons}
+                buttons_on_the_left={ctx.props().buttons_on_the_left}
+                left_icon={ctx.props().left_icon.then(|| IconName::Dollar)}
             />
             <NumericInput<i32>
-                disabled=self.props.disabled
-                fill=self.props.fill
-                large=self.props.large
-                value=self.value_two
+                disabled={ctx.props().disabled}
+                fill={ctx.props().fill}
+                large={ctx.props().large}
+                value={self.value_two}
                 bounds={-10..=10}
                 increment=1
-                placeholder=String::from("Integer between -10 and 10")
-                onchange=self.link.callback(|x| Msg::UpdateValueTwo(x))
-                disable_buttons=self.props.disable_buttons
-                buttons_on_the_left=self.props.buttons_on_the_left
-                left_icon=self.props.left_icon.then(|| IconName::Dollar)
+                placeholder={String::from("Integer between -10 and 10")}
+                onchange={ctx.link().callback(|x| Msg::UpdateValueTwo(x))}
+                disable_buttons={ctx.props().disable_buttons}
+                buttons_on_the_left={ctx.props().buttons_on_the_left}
+                left_icon={ctx.props().left_icon.then(|| IconName::Dollar)}
             />
             <Button
-                icon=IconName::Refresh
-                onclick=self.link.callback(|_| Msg::Reset)
+                icon={IconName::Refresh}
+                onclick={ctx.link().callback(|_| Msg::Reset)}
             >
                 {"Reset at 4"}
             </Button>
             <Callout
-                title=Cow::Borrowed("Selected values")
-                intent=Intent::Primary
+                title={"Selected values"}
+                intent={Intent::Primary}
             >
                 <ul>
                     <li>{self.value}</li>
diff --git a/yewprint-doc/src/numeric_input/mod.rs b/yewprint-doc/src/numeric_input/mod.rs
index 1149fe4..ddbb8cd 100644
--- a/yewprint-doc/src/numeric_input/mod.rs
+++ b/yewprint-doc/src/numeric_input/mod.rs
@@ -14,9 +14,9 @@ impl Component for NumericInputDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         NumericInputDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 fill: false,
                 disabled: false,
@@ -28,16 +28,12 @@ impl Component for NumericInputDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -46,19 +42,19 @@ impl Component for NumericInputDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"NumericInput"}</H1>
+                <H1 class={classes!("docs-title")}>{"NumericInput"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <NumericInputProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -68,57 +64,57 @@ impl Component for NumericInputDoc {
 
 crate::build_example_prop_component! {
     NumericInputProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         fill: !props.fill,
                         ..props
-                    })
-                    checked=self.props.fill
-                    label=html!("Fill")
+                    })}
+                    checked={ctx.props().example_props.fill}
+                    label={html!("Fill")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disable_buttons: !props.disable_buttons,
                         ..props
-                    })
-                    checked=self.props.disable_buttons
-                    label=html!("Disable buttons")
+                    })}
+                    checked={ctx.props().example_props.disable_buttons}
+                    label={html!("Disable buttons")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         buttons_on_the_left: !props.buttons_on_the_left,
                         ..props
-                    })
-                    checked=self.props.buttons_on_the_left
-                    label=html!("Buttons on the left")
+                    })}
+                    checked={ctx.props().example_props.buttons_on_the_left}
+                    label={html!("Buttons on the left")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         left_icon: !props.left_icon,
                         ..props
-                    })
-                    checked=self.props.left_icon
-                    label=html!("Left icon")
+                    })}
+                    checked={ctx.props().example_props.left_icon}
+                    label={html!("Left icon")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/panel_stack/example.rs b/yewprint-doc/src/panel_stack/example.rs
index 9cf07c8..1d43be6 100644
--- a/yewprint-doc/src/panel_stack/example.rs
+++ b/yewprint-doc/src/panel_stack/example.rs
@@ -2,8 +2,6 @@ use yew::prelude::*;
 use yewprint::{Button, Intent, PanelStack, PanelStackState, Text};
 
 pub struct Example {
-    link: ComponentLink<Self>,
-    props: ExampleProps,
     state: PanelStackState,
 }
 
@@ -23,37 +21,38 @@ impl Component for Example {
     type Message = ExampleMessage;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         let state = PanelStackState::new(html! {
-            <div class=classes!("docs-panel-stack-contents-example")>
+            <div class={classes!("docs-panel-stack-contents-example")}>
                 <div>{"Hello World!"}</div>
                 <Button
-                    intent=Intent::Primary
-                    onclick=link.callback(|_| ExampleMessage::OpenPanel2)
+                    intent={Intent::Primary}
+                    onclick={ctx.link().callback(|_| ExampleMessage::OpenPanel2)}
                 >
                     {"Open panel 2"}
                 </Button>
             </div>
         })
         .with_title(html! {
-            <Text class=classes!("bp3-heading") ellipsize=true>
+            <Text class={classes!("bp3-heading")} ellipsize=true>
                 {"Root Panel"}
             </Text>
         })
         .finish();
 
-        Example { link, props, state }
+        Example { state }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
+            // Open
             ExampleMessage::OpenPanel2 => self
                 .state
                 .open_panel(html! {
-                    <div class=classes!("docs-panel-stack-contents-example")>
+                    <div class={classes!("docs-panel-stack-contents-example")}>
                         <Button
-                            intent=Intent::Success
-                            onclick=self.link.callback(|_| ExampleMessage::OpenPanel2)
+                            intent={Intent::Success}
+                            onclick={ctx.link().callback(|_| ExampleMessage::OpenPanel2)}
                         >
                             {"Open another panel 2"}
                         </Button>
@@ -61,7 +60,7 @@ impl Component for Example {
                     </div>
                 })
                 .with_title(html! {
-                    <Text class=classes!("bp3-heading") ellipsize=true>
+                    <Text class={classes!("bp3-heading")} ellipsize=true>
                         {"Panel 2"}
                     </Text>
                 })
@@ -71,70 +70,34 @@ impl Component for Example {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <PanelStack
-                    state=self.state.clone()
-                    onclose=self.link.callback(|_| ExampleMessage::ClosePanel)
-                    class=classes!("docs-panel-stack-example")
+                    state={self.state.clone()}
+                    onclose={ctx.link().callback(|_| ExampleMessage::ClosePanel)}
+                    class={classes!("docs-panel-stack-example")}
                 />
             </div>
         }
     }
 }
 
-// Second panel: a simple counter
+/// Second panel: a simple counter
+#[function_component(Panel2)]
+pub fn panel2() -> Html {
+    let counter = use_state(|| 0);
+    let onclick = {
+        let counter = counter.clone();
+        Callback::from(move |_| counter.set(*counter + 1))
+    };
 
-pub struct Panel2 {
-    link: ComponentLink<Self>,
-    counter: i64,
-}
-
-pub enum Panel2Message {
-    AddOne,
-}
-
-impl Component for Panel2 {
-    type Message = Panel2Message;
-    type Properties = ();
-
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Panel2 { counter: 0, link }
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Panel2Message::AddOne => {
-                self.counter += 1;
-                true
-            }
-        }
-    }
-
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        false
-    }
-
-    fn view(&self) -> Html {
-        html! {
+    html! {
+        <div>
+            <p>{"Counter: "}{ *counter}</p>
             <div>
-                <p>{"Counter: "}{self.counter}</p>
-                <div>
-                    <Button onclick=self.link.callback(|_| Panel2Message::AddOne)>
-                        {"Add 1"}
-                    </Button>
-                </div>
+                <Button {onclick}>{ "Add 1" }</Button>
             </div>
-        }
+        </div>
     }
 }
diff --git a/yewprint-doc/src/panel_stack/mod.rs b/yewprint-doc/src/panel_stack/mod.rs
index 6893501..1de8faf 100644
--- a/yewprint-doc/src/panel_stack/mod.rs
+++ b/yewprint-doc/src/panel_stack/mod.rs
@@ -14,9 +14,9 @@ impl Component for PanelStackDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         PanelStackDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 animate: true,
                 vertical: false,
@@ -24,16 +24,12 @@ impl Component for PanelStackDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,14 +38,14 @@ impl Component for PanelStackDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"PanelStack"}</H1>
+                <H1 class={classes!("docs-title")}>{"PanelStack"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=None
+                        source={source}
+                        props={None}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
diff --git a/yewprint-doc/src/progress_bar/example.rs b/yewprint-doc/src/progress_bar/example.rs
index 7fa692a..b022a15 100644
--- a/yewprint-doc/src/progress_bar/example.rs
+++ b/yewprint-doc/src/progress_bar/example.rs
@@ -1,10 +1,6 @@
 use yew::prelude::*;
 use yewprint::{Intent, ProgressBar};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub intent: Option<Intent>,
@@ -12,32 +8,14 @@ pub struct ExampleProps {
     pub stripes: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-    fn view(&self) -> Html {
-        html! {
-            <ProgressBar
-                animate=self.props.animate
-                stripes=self.props.stripes
-                intent=self.props.intent
-                value=0.3
-            />
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <ProgressBar
+            animate={props.animate}
+            stripes={props.stripes}
+            intent={props.intent}
+            value=0.3
+        />
     }
 }
diff --git a/yewprint-doc/src/progress_bar/mod.rs b/yewprint-doc/src/progress_bar/mod.rs
index 0daf33c..9010be0 100644
--- a/yewprint-doc/src/progress_bar/mod.rs
+++ b/yewprint-doc/src/progress_bar/mod.rs
@@ -14,9 +14,9 @@ impl Component for ProgressBarDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         ProgressBarDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 intent: None,
                 animate: false,
@@ -25,16 +25,12 @@ impl Component for ProgressBarDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -43,18 +39,18 @@ impl Component for ProgressBarDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"ProgressBar"}</H1>
+                <H1 class={classes!("docs-title")}>{"ProgressBar"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <ProgressBarProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -63,26 +59,26 @@ impl Component for ProgressBarDoc {
 
 crate::build_example_prop_component! {
     ProgressBarProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <div>
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                                 stripes: !props.stripes,
                                 ..props
-                            })
-                            checked=self.props.stripes
-                            label=html!("Stripes")
+                            })}
+                            checked={ctx.props().example_props.stripes}
+                            label={html!("Stripes")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                                 animate: !props.animate,
                                 ..props
-                            })
-                            checked=self.props.animate
-                            label=html!("Animate")
+                            })}
+                            checked={ctx.props().example_props.animate}
+                            label={html!("Animate")}
                         />
                         <p>{"Select intent:"}</p>
                         <HtmlSelect<Option<Intent>>
@@ -93,10 +89,10 @@ crate::build_example_prop_component! {
                                 (Some(Intent::Warning), "Warning".to_string()),
                                 (Some(Intent::Danger), "Danger".to_string()),
                             ]}
-                            onchange=self.update_props(|props, intent| ExampleProps {
+                            onchange={self.update_props(ctx.props(), |props, intent| ExampleProps {
                                 intent,
                                 ..props
-                            })
+                            })}
                         />
                     </div>
                 </div>
diff --git a/yewprint-doc/src/radio/example.rs b/yewprint-doc/src/radio/example.rs
index 2cd8279..7ab4d84 100644
--- a/yewprint-doc/src/radio/example.rs
+++ b/yewprint-doc/src/radio/example.rs
@@ -2,8 +2,6 @@ use yew::prelude::*;
 use yewprint::{Label, Radio, RadioGroup};
 
 pub struct Example {
-    props: ExampleProps,
-    link: ComponentLink<Self>,
     selected_value: Lunch,
 }
 
@@ -22,15 +20,13 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            props,
             selected_value: Lunch::Salad,
-            link,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ValueUpdate(value) => {
                 self.selected_value = value;
@@ -39,51 +35,42 @@ impl Component for Example {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <>
                 <div>
                     <Radio
-                        label=html!("Blue pill")
-                        inline=self.props.inline
-                        disabled=self.props.disabled
-                        large=self.props.large
-                        name="group".to_string()
+                        label={html!("Blue pill")}
+                        inline={ctx.props().inline}
+                        disabled={ctx.props().disabled}
+                        large={ctx.props().large}
+                        name={"group".to_string()}
                     />
                     <Radio
-                        label=html!("Red pill")
-                        inline=self.props.inline
-                        disabled=self.props.disabled
-                        large=self.props.large
-                        name="group".to_string()
+                        label={html!("Red pill")}
+                        inline={ctx.props().inline}
+                        disabled={ctx.props().disabled}
+                        large={ctx.props().large}
+                        name={"group".to_string()}
                     />
                 </div>
                 <div>
                     <RadioGroup<Lunch>
-                        label=Some(html!(
+                        label={Some(html!(
                             <Label>
                                 {"Determine Lunch"}
                             </Label>
-                        ))
-                        options=vec![
+                        ))}
+                        options={vec![
                             (Lunch::Soup, "Soup".to_string()),
                             (Lunch::Salad, "Salad".to_string()),
                             (Lunch::Sandwich, "Sandwich".to_string()),
-                        ]
-                        value=self.selected_value
-                        onchange=self.link.callback(|v| Msg::ValueUpdate(v))
-                        inline=self.props.inline
-                        disabled=self.props.disabled
-                        large=self.props.large
+                        ]}
+                        value={self.selected_value}
+                        onchange={ctx.link().callback(|v| Msg::ValueUpdate(v))}
+                        inline={ctx.props().inline}
+                        disabled={ctx.props().disabled}
+                        large={ctx.props().large}
                     />
                 </div>
             </>
diff --git a/yewprint-doc/src/radio/mod.rs b/yewprint-doc/src/radio/mod.rs
index 191c1bb..040820d 100644
--- a/yewprint-doc/src/radio/mod.rs
+++ b/yewprint-doc/src/radio/mod.rs
@@ -14,9 +14,9 @@ impl Component for RadioDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         RadioDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 disabled: false,
                 inline: false,
@@ -25,16 +25,12 @@ impl Component for RadioDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -43,18 +39,18 @@ impl Component for RadioDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Radio"}</H1>
+                <H1 class={classes!("docs-title")}>{"Radio"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <RadioProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -63,33 +59,33 @@ impl Component for RadioDoc {
 
 crate::build_example_prop_component! {
     RadioProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         inline: !props.inline,
                         ..props
-                    })
-                    checked=self.props.inline
-                    label=html!("Inline")
+                    })}
+                    checked={ctx.props().example_props.inline}
+                    label={html!("Inline")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/slider/example.rs b/yewprint-doc/src/slider/example.rs
index db2d2f9..dc14442 100644
--- a/yewprint-doc/src/slider/example.rs
+++ b/yewprint-doc/src/slider/example.rs
@@ -3,11 +3,9 @@ use yew::prelude::*;
 use yewprint::{Intent, Slider, Tag};
 
 pub struct Example {
-    props: ExampleProps,
     float: f64,
     integer: i32,
     log_level: Option<LogLevel>,
-    link: ComponentLink<Self>,
 }
 
 #[derive(Clone, PartialEq, Properties)]
@@ -27,17 +25,15 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            props,
             float: 1.2,
             integer: 30,
             log_level: None,
-            link,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::FloatUpdate(value) => {
                 self.float = value;
@@ -53,16 +49,7 @@ impl Component for Example {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         let percentage_labels = (0..=100)
             .step_by(1)
             .map(|x| (x, (x % 10 == 0).then(|| format!("{}%", x).into())))
@@ -74,8 +61,8 @@ impl Component for Example {
                     style="display: flex; align-items: flex-start; width: 100%"
                 >
                     <Slider<f64>
-                        selected=self.float
-                        values=vec![
+                        selected={self.float}
+                        values={vec![
                             (0.0, Some("0".into())),
                             (0.1, None),
                             (0.2, None),
@@ -87,43 +74,43 @@ impl Component for Example {
                             (0.8, None),
                             (0.9, None),
                             (1.0, Some("1".into())),
-                        ]
-                        intent=self.props.intent
-                        onchange=self.link.callback(|x| Msg::FloatUpdate(x))
+                        ]}
+                        intent={ctx.props().intent}
+                        onchange={ctx.link().callback(|x| Msg::FloatUpdate(x))}
                     />
                     <Tag
-                        style=Cow::Borrowed("width: 32px; margin-left: 16px")
+                        style={"width: 32px; margin-left: 16px"}
                         minimal=true
-                        intent=self.props.intent
+                        intent={ctx.props().intent}
                     >
                         {format!("{:.1}", self.float)}
                     </Tag>
                 </div>
                 <Slider<i32>
-                    values=percentage_labels
-                    selected=self.integer
-                    intent=self.props.intent
-                    value_label=Cow::Owned(format!("{}%", self.integer))
-                    onchange=self.link.callback(|x| Msg::IntegerUpdate(x))
+                    values={percentage_labels}
+                    selected={self.integer}
+                    intent={ctx.props().intent}
+                    value_label={Cow::Owned(format!("{}%", self.integer))}
+                    onchange={ctx.link().callback(|x| Msg::IntegerUpdate(x))}
                 />
                 <Slider<LogLevel>
-                    values=vec![
+                    values={vec![
                         (LogLevel::Off, Some("OFF".into())),
                         (LogLevel::Error, Some("ERROR".into())),
                         (LogLevel::Warn, Some("WARN".into())),
                         (LogLevel::Info, Some("INFO".into())),
                         (LogLevel::Debug, Some("DEBUG".into())),
                         (LogLevel::Trace, Some("TRACE".into())),
-                    ]
-                    intent=self.props.intent
-                    selected=self.log_level.clone()
-                    onchange=self.link.callback(|x| Msg::LogLevelUpdate(x))
+                    ]}
+                    intent={ctx.props().intent}
+                    selected={self.log_level.clone()}
+                    onchange={ctx.link().callback(|x| Msg::LogLevelUpdate(x))}
                 />
                 <Slider<()>
-                    values=vec![((), Some("Neo".into()))]
-                    intent=self.props.intent
-                    selected=()
-                    onchange=self.link.callback(|_| Msg::Noop)
+                    values={vec![((), Some("Neo".into()))]}
+                    intent={ctx.props().intent}
+                    selected={()}
+                    onchange={ctx.link().callback(|_| Msg::Noop)}
                 />
             </>
         }
diff --git a/yewprint-doc/src/slider/mod.rs b/yewprint-doc/src/slider/mod.rs
index 20d5fed..8a29091 100644
--- a/yewprint-doc/src/slider/mod.rs
+++ b/yewprint-doc/src/slider/mod.rs
@@ -14,9 +14,9 @@ impl Component for SliderDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         SliderDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 vertical: false,
                 intent: None,
@@ -24,16 +24,12 @@ impl Component for SliderDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,21 +38,21 @@ impl Component for SliderDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Slider"}</H1>
+                <H1 class={classes!("docs-title")}>{"Slider"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <SliderProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
                 <H2>{"Edge Cases"}</H2>
-                <div class=classes!("bp3-running-text")>
+                <div class={classes!("bp3-running-text")}>
                     <ul>
                         <li>
                             <p>
@@ -108,17 +104,17 @@ impl Component for SliderDoc {
 
 crate::build_example_prop_component! {
     SliderProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         vertical: !props.vertical,
                         ..props
-                    })
-                    checked=self.props.vertical
-                    label=html!("Vertical")
+                    })}
+                    checked={ctx.props().example_props.vertical}
+                    label={html!("Vertical")}
                     disabled=true
                 />
                 <p>{"Select intent:"}</p>
@@ -130,10 +126,10 @@ crate::build_example_prop_component! {
                         (Some(Intent::Warning), "Warning".to_string()),
                         (Some(Intent::Danger), "Danger".to_string()),
                     ]}
-                    onchange=self.update_props(|props, intent| ExampleProps {
+                    onchange={self.update_props(ctx.props(), |props, intent| ExampleProps {
                         intent,
                         ..props
-                    })
+                    })}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/spinner/example.rs b/yewprint-doc/src/spinner/example.rs
index be14c29..b4a8507 100644
--- a/yewprint-doc/src/spinner/example.rs
+++ b/yewprint-doc/src/spinner/example.rs
@@ -1,45 +1,20 @@
 use yew::prelude::*;
 use yewprint::{Intent, Spinner};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub intent: Option<Intent>,
     pub size: u32,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div>
-                <Spinner
-                    size=self.props.size as f32
-                    intent=self.props.intent
-                />
-            </div>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <div>
+            <Spinner
+                size={props.size as f32}
+                intent={props.intent}
+            />
+        </div>
     }
 }
diff --git a/yewprint-doc/src/spinner/mod.rs b/yewprint-doc/src/spinner/mod.rs
index a37f4dc..2faf5d2 100644
--- a/yewprint-doc/src/spinner/mod.rs
+++ b/yewprint-doc/src/spinner/mod.rs
@@ -14,9 +14,9 @@ impl Component for SpinnerDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         SpinnerDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 intent: None,
                 size: 50,
@@ -24,16 +24,12 @@ impl Component for SpinnerDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,19 +38,19 @@ impl Component for SpinnerDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Spinner"}</H1>
+                <H1 class={classes!("docs-title")}>{"Spinner"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <SpinnerProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -64,7 +60,7 @@ impl Component for SpinnerDoc {
 
 crate::build_example_prop_component! {
     SpinnerProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
@@ -78,10 +74,10 @@ crate::build_example_prop_component! {
                             (Some(Intent::Warning), "Warning".to_string()),
                             (Some(Intent::Danger), "Danger".to_string()),
                         ]}
-                        onchange=self.update_props(|props, intent| ExampleProps {
+                        onchange={self.update_props(ctx.props(), |props, intent| ExampleProps {
                             intent,
                             ..props
-                        })
+                        })}
                     />
                     <p
                         style="margin-top: 5px;"
@@ -89,7 +85,7 @@ crate::build_example_prop_component! {
                         {"Select Size:"}
                     </p>
                     <Slider<u32>
-                        selected=self.props.size
+                        selected={ctx.props().example_props.size}
                         values={vec![
                             (10, Some("10".into())),
                             (20, None),
@@ -102,10 +98,10 @@ crate::build_example_prop_component! {
                             (90, None),
                             (100, Some("100".into())),
                         ]}
-                        onchange=self.update_props(|props, size| ExampleProps {
+                        onchange={self.update_props(ctx.props(), |props, size| ExampleProps {
                             size,
                             ..props
-                        })
+                        })}
                     />
                 </div>
             </div>
diff --git a/yewprint-doc/src/switch/example.rs b/yewprint-doc/src/switch/example.rs
index cbfc1e3..f07f123 100644
--- a/yewprint-doc/src/switch/example.rs
+++ b/yewprint-doc/src/switch/example.rs
@@ -1,10 +1,6 @@
 use yew::prelude::*;
 use yewprint::{Label, Switch};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub disabled: bool,
@@ -13,63 +9,41 @@ pub struct ExampleProps {
     pub align_right: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div>
-                <Label>{"Privacy settings"}</Label>
-                <Switch
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!{<strong>{"Enabled"}</strong>}
-                    align_right=self.props.align_right
-                />
-                <Switch
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!{<em>{"Public"}</em>}
-                    align_right=self.props.align_right
-                />
-                <Switch
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    checked=true
-                    label=html!{<u>{"Cooperative"}</u>}
-                    align_right=self.props.align_right
-                />
-                <Switch
-                    disabled=self.props.disabled
-                    inline=self.props.inline
-                    large=self.props.large
-                    label=html!{"Containing Text"}
-                    inner_label_checked={"on".to_string()}
-                    inner_label={"off".to_string()}
-                    align_right=self.props.align_right
-                />
-            </div>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <div>
+            <Label>{"Privacy settings"}</Label>
+            <Switch
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                align_right={props.align_right}
+                label={html!("Enabled")}
+            />
+            <Switch
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                align_right={props.align_right}
+                label={html!(<em>{"Public"}</em>)}
+            />
+            <Switch
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                align_right={props.align_right}
+                label={html!(<strong>{"Cooperative"}</strong>)}
+            />
+            <Switch
+                disabled={props.disabled}
+                inline={props.inline}
+                large={props.large}
+                align_right={props.align_right}
+                label={html!(<u>{"Containing Text"}</u>)}
+                inner_label_checked={"on".to_string()}
+                inner_label={"off".to_string()}
+            />
+        </div>
     }
 }
diff --git a/yewprint-doc/src/switch/mod.rs b/yewprint-doc/src/switch/mod.rs
index 513361f..1298425 100644
--- a/yewprint-doc/src/switch/mod.rs
+++ b/yewprint-doc/src/switch/mod.rs
@@ -14,9 +14,9 @@ impl Component for SwitchDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         SwitchDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 disabled: false,
                 inline: false,
@@ -26,16 +26,12 @@ impl Component for SwitchDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -44,19 +40,19 @@ impl Component for SwitchDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Switch"}</H1>
+                <H1 class={classes!("docs-title")}>{"Switch"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html! {
+                    source={source}
+                    props={Some(html! {
                         <SwitchProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         >
                         </SwitchProps>
-                    })
+                    })}
                 >
-                    <Example with example_props />
+                    <Example ..example_props />
                 </ExampleContainer>
             </div>
         }
@@ -65,41 +61,41 @@ impl Component for SwitchDoc {
 
 crate::build_example_prop_component! {
     SwitchProps for ExampleProps =>
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <H5>{"Props"}</H5>
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         disabled: !props.disabled,
                         ..props
-                    })
-                    checked=self.props.disabled
-                    label=html!("Disabled")
+                    })}
+                    checked={ctx.props().example_props.disabled}
+                    label={html!("Disabled")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         inline: !props.inline,
                         ..props
-                    })
-                    checked=self.props.inline
-                    label=html!("Inline")
+                    })}
+                    checked={ctx.props().example_props.inline}
+                    label={html!("Inline")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         large: !props.large,
                         ..props
-                    })
-                    checked=self.props.large
-                    label=html!("Large")
+                    })}
+                    checked={ctx.props().example_props.large}
+                    label={html!("Large")}
                 />
                 <Switch
-                    onclick=self.update_props(|props, _| ExampleProps {
+                    onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                         align_right: !props.align_right,
                         ..props
-                    })
-                    checked=self.props.align_right
-                    label=html!("Align right")
+                    })}
+                    checked={ctx.props().example_props.align_right}
+                    label={html!("Align right")}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/tabs/example.rs b/yewprint-doc/src/tabs/example.rs
index 1ee97e5..07b7940 100644
--- a/yewprint-doc/src/tabs/example.rs
+++ b/yewprint-doc/src/tabs/example.rs
@@ -2,8 +2,6 @@ use yew::prelude::*;
 use yewprint::{Tab, Tabs};
 
 pub struct Example {
-    link: ComponentLink<Self>,
-    props: ExampleProps,
     selected: Civilization,
 }
 
@@ -17,15 +15,13 @@ impl Component for Example {
     type Message = Civilization;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         Example {
-            link,
-            props,
             selected: Civilization::Minoan,
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         if self.selected != msg {
             self.selected = msg;
             true
@@ -34,25 +30,16 @@ impl Component for Example {
         }
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
             <div>
                 <Tabs<Civilization>
                     id="civilizations"
-                    animate=self.props.animate
-                    vertical=self.props.vertical
-                    selected_tab_id=self.selected
-                    onchange=self.link.callback(|x| x)
-                    tabs=vec![
+                    animate={ctx.props().animate}
+                    vertical={ctx.props().vertical}
+                    selected_tab_id={self.selected}
+                    onchange={ctx.link().callback(|x| x)}
+                    tabs={vec![
                         Tab {
                             disabled: false,
                             id: Civilization::Sumer,
@@ -133,7 +120,7 @@ impl Component for Example {
                             panel_class: Classes::default(),
                             title_class: Classes::default(),
                         },
-                    ]
+                    ]}
                 />
             </div>
         }
diff --git a/yewprint-doc/src/tabs/mod.rs b/yewprint-doc/src/tabs/mod.rs
index 1a06de6..a230f67 100644
--- a/yewprint-doc/src/tabs/mod.rs
+++ b/yewprint-doc/src/tabs/mod.rs
@@ -14,9 +14,9 @@ impl Component for TabsDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         TabsDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 animate: true,
                 vertical: false,
@@ -24,16 +24,12 @@ impl Component for TabsDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,19 +38,19 @@ impl Component for TabsDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Tabs"}</H1>
+                <H1 class={classes!("docs-title")}>{"Tabs"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <TabsProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -64,25 +60,25 @@ impl Component for TabsDoc {
 
 crate::build_example_prop_component! {
     TabsProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             animate: !props.animate,
                             ..props
-                        })
-                        checked=self.props.animate
-                        label=html!("Animate indicator")
+                        })}
+                        checked={ctx.props().example_props.animate}
+                        label={html!("Animate indicator")}
                     />
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             vertical: !props.vertical,
                             ..props
-                        })
-                        checked=self.props.vertical
-                        label=html!("Use vertical tabs")
+                        })}
+                        checked={ctx.props().example_props.vertical}
+                        label={html!("Use vertical tabs")}
                     />
                 </div>
             }
diff --git a/yewprint-doc/src/tag/example.rs b/yewprint-doc/src/tag/example.rs
index 5ccbab4..01f6ac9 100644
--- a/yewprint-doc/src/tag/example.rs
+++ b/yewprint-doc/src/tag/example.rs
@@ -2,8 +2,6 @@ use yew::prelude::*;
 use yewprint::{IconName, Intent, Tag};
 
 pub struct Example {
-    props: ExampleProps,
-    link: ComponentLink<Self>,
     tags: Vec<String>,
 }
 
@@ -33,12 +31,12 @@ impl Component for Example {
     type Message = ExampleMsg;
     type Properties = ExampleProps;
 
-    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let tags = props.initial_tags.clone();
-        Example { props, link, tags }
+    fn create(ctx: &Context<Self>) -> Self {
+        let tags = ctx.props().initial_tags.clone();
+        Example { tags }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             ExampleMsg::Remove(label) => {
                 self.tags = self
@@ -53,43 +51,38 @@ impl Component for Example {
         true
     }
 
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            if self.props.reset_tags != props.reset_tags {
-                self.tags = props.initial_tags.clone();
-            }
-            self.props = props;
-            true
-        } else {
-            false
+    fn changed(&mut self, ctx: &Context<Self>) -> bool {
+        if ctx.props().reset_tags != ctx.props().reset_tags {
+            self.tags = ctx.props().initial_tags.clone();
         }
+        true
     }
 
-    fn view(&self) -> Html {
+    fn view(&self, ctx: &Context<Self>) -> Html {
         self.tags
             .iter()
             .map(|label| {
                 let remove = {
                     let label = label.clone();
-                    self.props.removable.then(|| {
-                        self.link
+                    ctx.props().removable.then(|| {
+                        ctx.link()
                             .callback(move |_| ExampleMsg::Remove(label.clone()))
                     })
                 };
                 html! {
                     <Tag
-                        active=self.props.active
-                        fill=self.props.fill
-                        icon=self.props.icon.then(|| IconName::Print)
-                        intent=self.props.intent
-                        interactive=self.props.interactive
-                        large=self.props.large
-                        minimal=self.props.minimal
-                        multiline=self.props.multiline
-                        right_icon=self.props.right_icon.then(|| IconName::Star)
-                        round=self.props.round
-                        onremove=remove
-                        onclick=self.link.callback(|_| ExampleMsg::Click)
+                        active={ctx.props().active}
+                        fill={ctx.props().fill}
+                        icon={ctx.props().icon.then(|| IconName::Print)}
+                        intent={ctx.props().intent}
+                        interactive={ctx.props().interactive}
+                        large={ctx.props().large}
+                        minimal={ctx.props().minimal}
+                        multiline={ctx.props().multiline}
+                        right_icon={ctx.props().right_icon.then(|| IconName::Star)}
+                        round={ctx.props().round}
+                        onremove={remove}
+                        onclick={ctx.link().callback(|_| ExampleMsg::Click)}
                     >
                         {label.clone()}
                     </Tag>
diff --git a/yewprint-doc/src/tag/mod.rs b/yewprint-doc/src/tag/mod.rs
index 0a33dec..862ae4c 100644
--- a/yewprint-doc/src/tag/mod.rs
+++ b/yewprint-doc/src/tag/mod.rs
@@ -28,9 +28,9 @@ impl Component for TagDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         TagDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 initial_tags: initial_tags(),
                 active: false,
@@ -49,16 +49,12 @@ impl Component for TagDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -67,18 +63,18 @@ impl Component for TagDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Tag"}</H1>
+                <H1 class={classes!("docs-title")}>{"Tag"}</H1>
                 <SourceCodeUrl />
                 <ExampleContainer
-                    source=source
-                    props=Some(html!{
+                    source={source}
+                    props={Some(html!{
                         <TagProps
                             callback={self.callback.clone()}
-                            props=example_props.clone()
+                            example_props={example_props.clone()}
                         />
-                    })
+                    })}
                 >
-                    <Example with example_props/>
+                    <Example ..example_props/>
                 </ExampleContainer>
             </div>
         }
@@ -87,90 +83,92 @@ impl Component for TagDoc {
 
 crate::build_example_prop_component! {
     TagProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
+            let props = ctx.props();
+
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <div>
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 active: !props.active,
                                 ..props
-                            })
-                            checked=self.props.active
-                            label=html!("Active")
+                            })}
+                            checked={props.example_props.active}
+                            label={html!("Active")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 fill: !props.fill,
                                 ..props
-                            })
-                            checked=self.props.fill
-                            label=html!("Fill")
+                            })}
+                            checked={props.example_props.fill}
+                            label={html!("Fill")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 interactive: !props.interactive,
                                 ..props
-                            })
-                            checked=self.props.interactive
-                            label=html!("Interactive")
+                            })}
+                            checked={props.example_props.interactive}
+                            label={html!("Interactive")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 large: !props.large,
                                 ..props
-                            })
-                            checked=self.props.large
-                            label=html!("Large")
+                            })}
+                            checked={props.example_props.large}
+                            label={html!("Large")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 minimal: !props.minimal,
                                 ..props
-                            })
-                            checked=self.props.minimal
-                            label=html!("Minimal")
+                            })}
+                            checked={props.example_props.minimal}
+                            label={html!("Minimal")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 multiline: !props.multiline,
                                 ..props
-                            })
-                            checked=self.props.multiline
-                            label=html!("Multiline")
+                            })}
+                            checked={props.example_props.multiline}
+                            label={html!("Multiline")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 round: !props.round,
                                 ..props
-                            })
-                            checked=self.props.round
-                            label=html!("Round")
+                            })}
+                            checked={props.example_props.round}
+                            label={html!("Round")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 removable: !props.removable,
                                 ..props
-                            })
-                            checked=self.props.removable
-                            label=html!("Removable")
+                            })}
+                            checked={props.example_props.removable}
+                            label={html!("Removable")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 icon: !props.icon,
                                 ..props
-                            })
-                            checked=self.props.icon
-                            label=html!("Icon")
+                            })}
+                            checked={props.example_props.icon}
+                            label={html!("Icon")}
                         />
                         <Switch
-                            onclick=self.update_props(|props, _| ExampleProps {
+                            onclick={self.update_props(props, |props, _| ExampleProps {
                                 right_icon: !props.right_icon,
                                 ..props
-                            })
-                            checked=self.props.right_icon
-                            label=html!("Right icon")
+                            })}
+                            checked={props.example_props.right_icon}
+                            label={html!("Right icon")}
                         />
                         <p>{"Select intent:"}</p>
                         <ButtonGroup
@@ -184,17 +182,17 @@ crate::build_example_prop_component! {
                                     (Some(Intent::Warning), "Warning".to_string()),
                                     (Some(Intent::Danger), "Danger".to_string()),
                                 ]}
-                                onchange=self.update_props(|props, intent| ExampleProps {
+                                onchange={self.update_props(props, |props, intent| ExampleProps {
                                     intent,
                                     ..props
-                                })
+                                })}
                             />
                             <Button
-                                icon=IconName::Refresh
-                                onclick=self.update_props(|props, _| ExampleProps {
+                                icon={IconName::Refresh}
+                                onclick={self.update_props(props, |props, _| ExampleProps {
                                     reset_tags: props.reset_tags + 1,
-                                    ..props
-                                })
+                                    ..props.clone()
+                                })}
                             >
                                 {"Reset tags"}
                             </Button>
diff --git a/yewprint-doc/src/text/example.rs b/yewprint-doc/src/text/example.rs
index df91775..70ca090 100644
--- a/yewprint-doc/src/text/example.rs
+++ b/yewprint-doc/src/text/example.rs
@@ -1,44 +1,19 @@
 use yew::prelude::*;
 use yewprint::Text;
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub ellipsize: bool,
     pub text: String,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div style="width: 150px; height: 20px">
-                <Text ellipsize=self.props.ellipsize>
-                    {&self.props.text}
-                </Text>
-            </div>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <div style="width: 150px; height: 20px">
+            <Text ellipsize={props.ellipsize}>
+                {&props.text}
+            </Text>
+        </div>
     }
 }
diff --git a/yewprint-doc/src/text/mod.rs b/yewprint-doc/src/text/mod.rs
index 081101d..db76120 100644
--- a/yewprint-doc/src/text/mod.rs
+++ b/yewprint-doc/src/text/mod.rs
@@ -2,6 +2,7 @@ mod example;
 
 use crate::ExampleContainer;
 use example::*;
+use web_sys::HtmlInputElement;
 use yew::prelude::*;
 use yewprint::{Switch, H1, H5};
 
@@ -14,9 +15,9 @@ impl Component for TextDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         TextDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 ellipsize: false,
                 text: String::from("Hello, world!"),
@@ -24,16 +25,12 @@ impl Component for TextDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -42,19 +39,19 @@ impl Component for TextDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Text"}</H1>
+                <H1 class={classes!("docs-title")}>{"Text"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <TextProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -64,37 +61,36 @@ impl Component for TextDoc {
 
 crate::build_example_prop_component! {
     TextProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             ellipsize: !props.ellipsize,
                             ..props
-                        })
-                        checked=self.props.ellipsize
-                        label=html!("Ellipsize")
+                        })}
+                        checked={ctx.props().example_props.ellipsize}
+                        label={html!("Ellipsize")}
                     />
                     <input
                         class="bp3-input"
-                        onchange=self.update_props(|props, e|
-                            match e {
-                                ChangeData::Value(text) => {
+                        onchange={self.update_props(ctx.props(), |props, e: Event| {
+                                if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
                                     ExampleProps {
-                                        text,
+                                        text: input.value(),
                                         ..props
                                     }
-                                },
-                                _ => {
+                                } else {
                                     ExampleProps {
                                         text: "Hello, world!".to_string(),
                                         ..props
                                     }
                                 }
-                        })
+                            }
+                        )}
                         type="text"
-                        value={self.props.text.clone()}
+                        value={ctx.props().example_props.text.clone()}
                     />
                 </div>
             }
diff --git a/yewprint-doc/src/text_area/example.rs b/yewprint-doc/src/text_area/example.rs
index f56e3fe..fd62f8c 100644
--- a/yewprint-doc/src/text_area/example.rs
+++ b/yewprint-doc/src/text_area/example.rs
@@ -1,10 +1,6 @@
 use yew::prelude::*;
 use yewprint::{Intent, TextArea};
 
-pub struct Example {
-    props: ExampleProps,
-}
-
 #[derive(Clone, PartialEq, Properties)]
 pub struct ExampleProps {
     pub intent: Option<Intent>,
@@ -13,36 +9,15 @@ pub struct ExampleProps {
     pub fill: bool,
 }
 
-impl Component for Example {
-    type Message = ();
-    type Properties = ExampleProps;
-
-    fn create(props: Self::Properties, _link: ComponentLink<Self>) -> Self {
-        Example { props }
-    }
-
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
-        true
-    }
-
-    fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        if self.props != props {
-            self.props = props;
-            true
-        } else {
-            false
-        }
-    }
-
-    fn view(&self) -> Html {
-        html! {
-            <div style="width: 200px; height: 50px">
-                <TextArea intent=self.props.intent
-                          large=self.props.large
-                          fill=self.props.fill
-                          small=self.props.small
-                />
-            </div>
-        }
+#[function_component(Example)]
+pub fn example(props: &ExampleProps) -> Html {
+    html! {
+        <div style="width: 200px; height: 50px">
+            <TextArea intent={props.intent}
+                      large={props.large}
+                      fill={props.fill}
+                      small={props.small}
+            />
+        </div>
     }
 }
diff --git a/yewprint-doc/src/text_area/mod.rs b/yewprint-doc/src/text_area/mod.rs
index e75f87f..1bf50a2 100644
--- a/yewprint-doc/src/text_area/mod.rs
+++ b/yewprint-doc/src/text_area/mod.rs
@@ -14,9 +14,9 @@ impl Component for TextAreaDoc {
     type Message = ExampleProps;
     type Properties = ();
 
-    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         TextAreaDoc {
-            callback: link.callback(|x| x),
+            callback: ctx.link().callback(|x| x),
             state: ExampleProps {
                 intent: None,
                 large: false,
@@ -26,16 +26,12 @@ impl Component for TextAreaDoc {
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         self.state = msg;
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let example_props = self.state.clone();
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
@@ -44,19 +40,19 @@ impl Component for TextAreaDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Text"}</H1>
+                <H1 class={classes!("docs-title")}>{"Text"}</H1>
                 <SourceCodeUrl />
                 <div>
                     <ExampleContainer
-                        source=source
-                        props=Some(html! {
+                        source={source}
+                        props={Some(html! {
                             <TextAreaProps
                                 callback={self.callback.clone()}
-                                props=example_props.clone()
+                                example_props={example_props.clone()}
                             />
-                        })
+                        })}
                     >
-                        <Example with example_props />
+                        <Example ..example_props />
                     </ExampleContainer>
                 </div>
             </div>
@@ -66,33 +62,33 @@ impl Component for TextAreaDoc {
 
 crate::build_example_prop_component! {
     TextAreaProps for ExampleProps =>
-        fn view(&self) -> Html {
+        fn view(&self, ctx: &Context<Self>) -> Html {
             html! {
                 <div>
                     <H5>{"Props"}</H5>
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             fill: !props.fill,
                             ..props
-                        })
-                        checked=self.props.fill
-                        label=html!("Fill")
+                        })}
+                        checked={ctx.props().example_props.fill}
+                        label={html!("Fill")}
                          />
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             large: !props.large,
                             ..props
-                        })
-                        checked=self.props.large
-                        label=html!("Large")
+                        })}
+                        checked={ctx.props().example_props.large}
+                        label={html!("Large")}
                     />
                     <Switch
-                        onclick=self.update_props(|props, _| ExampleProps {
+                        onclick={self.update_props(ctx.props(), |props, _| ExampleProps {
                             small: !props.small,
                             ..props
-                        })
-                        checked=self.props.small
-                        label=html!("Small")
+                        })}
+                        checked={ctx.props().example_props.small}
+                        label={html!("Small")}
                     />
                     <HtmlSelect<Option<Intent>>
                         options={vec![
@@ -102,10 +98,10 @@ crate::build_example_prop_component! {
                             (Some(Intent::Warning), "Warning".to_string()),
                             (Some(Intent::Danger), "Danger".to_string()),
                         ]}
-                        onchange=self.update_props(|props, intent| ExampleProps {
+                        onchange={self.update_props(ctx.props(), |props, intent| ExampleProps {
                             intent,
                             ..props
-                        })
+                        })}
                     />
                 </div>
             }
diff --git a/yewprint-doc/src/tree/example.rs b/yewprint-doc/src/tree/example.rs
index fa13df4..086dc2b 100644
--- a/yewprint-doc/src/tree/example.rs
+++ b/yewprint-doc/src/tree/example.rs
@@ -17,7 +17,7 @@ impl Component for Example {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
+    fn create(ctx: &Context<Self>) -> Self {
         let mut tree = TreeBuilder::new().build();
         let root_id = tree
             .insert(
@@ -71,7 +71,7 @@ impl Component for Example {
                 icon: Some(IconName::Tag),
                 icon_intent: Some(Intent::Primary),
                 label: "Outer file".into(),
-                secondary_label: Some(html!(<Icon icon=IconName::EyeOpen />)),
+                secondary_label: Some(html!(<Icon icon={IconName::EyeOpen} />)),
                 data: 3,
                 ..Default::default()
             }),
@@ -81,12 +81,12 @@ impl Component for Example {
 
         Self {
             tree: tree.into(),
-            callback_expand_node: link.callback(|(node_id, _)| Msg::ExpandNode(node_id)),
-            callback_select_node: link.callback(|(node_id, _)| Msg::SelectNode(node_id)),
+            callback_expand_node: ctx.link().callback(|(node_id, _)| Msg::ExpandNode(node_id)),
+            callback_select_node: ctx.link().callback(|(node_id, _)| Msg::SelectNode(node_id)),
         }
     }
 
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::ExpandNode(node_id) => {
                 let mut tree = self.tree.borrow_mut();
@@ -109,17 +109,13 @@ impl Component for Example {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         html! {
             <Tree<i32>
-                tree=self.tree.clone()
-                on_collapse=Some(self.callback_expand_node.clone())
-                on_expand=Some(self.callback_expand_node.clone())
-                onclick=Some(self.callback_select_node.clone())
+                tree={self.tree.clone()}
+                on_collapse={Some(self.callback_expand_node.clone())}
+                on_expand={Some(self.callback_expand_node.clone())}
+                onclick={Some(self.callback_select_node.clone())}
             />
         }
     }
diff --git a/yewprint-doc/src/tree/mod.rs b/yewprint-doc/src/tree/mod.rs
index 1da2231..6163236 100644
--- a/yewprint-doc/src/tree/mod.rs
+++ b/yewprint-doc/src/tree/mod.rs
@@ -11,19 +11,15 @@ impl Component for TreeDoc {
     type Message = ();
     type Properties = ();
 
-    fn create(_: Self::Properties, _link: ComponentLink<Self>) -> Self {
+    fn create(_ctx: &Context<Self>) -> Self {
         TreeDoc
     }
 
-    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
         true
     }
 
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        true
-    }
-
-    fn view(&self) -> Html {
+    fn view(&self, _ctx: &Context<Self>) -> Html {
         let source = crate::include_raw_html!(
             concat!(env!("OUT_DIR"), "/", file!(), ".html"),
             "bp3-code-block"
@@ -31,9 +27,9 @@ impl Component for TreeDoc {
 
         html! {
             <div>
-                <H1 class=classes!("docs-title")>{"Tree"}</H1>
+                <H1 class={classes!("docs-title")}>{"Tree"}</H1>
                 <SourceCodeUrl />
-                <ExampleContainer source=source>
+                <ExampleContainer source={source}>
                     <Example />
                 </ExampleContainer>
             </div>