diff --git a/Cargo.toml b/Cargo.toml
index 06d614c..f75f084 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "monaco"
-version = "0.5.0"
+version = "0.6.0"
 authors = ["Simon Berger <simon@siku2.io>"]
 edition = "2018"
 description = "Rust WASM bindings for the Monaco Editor"
@@ -28,7 +28,7 @@ yew-components = ["api", "yew"]
 js-sys = "0.3"
 paste = "1.0"
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"], optional = true }
+yew = { version = "0.22", features = ["csr"], optional = true }
 
 [dependencies.web-sys]
 version = "0.3"
diff --git a/examples/yew/Cargo.toml b/examples/yew/Cargo.toml
index 21e3739..f3a25be 100644
--- a/examples/yew/Cargo.toml
+++ b/examples/yew/Cargo.toml
@@ -7,4 +7,4 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }
diff --git a/examples/yew_events_external/Cargo.toml b/examples/yew_events_external/Cargo.toml
index c6c9f4a..367203f 100644
--- a/examples/yew_events_external/Cargo.toml
+++ b/examples/yew_events_external/Cargo.toml
@@ -7,7 +7,7 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }
 
 # Used for the randomess, not needed usually.
 getrandom = { version = "0.2", features = ["js"] }
diff --git a/examples/yew_events_external/src/main.rs b/examples/yew_events_external/src/main.rs
index 12c5385..000d7fc 100644
--- a/examples/yew_events_external/src/main.rs
+++ b/examples/yew_events_external/src/main.rs
@@ -25,8 +25,8 @@ pub struct CustomEditorProps {
 /// This is really just a helper component, so we can pass in props easier.
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps { text_model } = props;
 
     html! {
@@ -43,8 +43,8 @@ fn random_string() -> String {
         .collect()
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // We need to create a new text model, so we can pass it to Monaco.
     // We use use_state_eq, as this allows us to only use it when it changes.
     let text_model =
diff --git a/examples/yew_events_keymapping/Cargo.toml b/examples/yew_events_keymapping/Cargo.toml
index 4a89941..a94ea40 100644
--- a/examples/yew_events_keymapping/Cargo.toml
+++ b/examples/yew_events_keymapping/Cargo.toml
@@ -7,4 +7,4 @@ edition = "2018"
 [dependencies]
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
-yew = { version = "0.21", features = ["csr"] }
\ No newline at end of file
+yew = { version = "0.22", features = ["csr"] }
\ No newline at end of file
diff --git a/examples/yew_events_keymapping/src/main.rs b/examples/yew_events_keymapping/src/main.rs
index d92df18..9d3b052 100644
--- a/examples/yew_events_keymapping/src/main.rs
+++ b/examples/yew_events_keymapping/src/main.rs
@@ -29,8 +29,8 @@ pub struct CustomEditorProps {
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
 ///
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps {
         on_editor_created,
         text_model,
@@ -41,8 +41,8 @@ pub fn custom_editor(props: &CustomEditorProps) -> Html {
     }
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // We need to create a new text model, so we can pass it to Monaco.
     // We use use_state_eq, as this allows us to only use it when it changes.
     let text_model = use_state_eq(|| TextModel::create(CONTENT, Some("rust"), None).unwrap());
diff --git a/examples/yew_model_decorations/Cargo.toml b/examples/yew_model_decorations/Cargo.toml
index 5dfc8ac..887729c 100644
--- a/examples/yew_model_decorations/Cargo.toml
+++ b/examples/yew_model_decorations/Cargo.toml
@@ -8,4 +8,4 @@ edition = "2018"
 monaco = { path = "../..", features = ["yew-components"] }
 wasm-bindgen = "0.2"
 js-sys = "0.3"
-yew = { version = "0.21", features = ["csr"] }
+yew = { version = "0.22", features = ["csr"] }
diff --git a/examples/yew_model_decorations/src/main.rs b/examples/yew_model_decorations/src/main.rs
index 4ab27c3..0a676a0 100644
--- a/examples/yew_model_decorations/src/main.rs
+++ b/examples/yew_model_decorations/src/main.rs
@@ -28,8 +28,8 @@ pub struct CustomEditorProps {
 /// This is really just a helper component, so we can pass in props easier.
 /// It makes it much easier to use, as we can pass in what we need, and it
 /// will only re-render if the props change.
-#[function_component(CustomEditor)]
-pub fn custom_editor(props: &CustomEditorProps) -> Html {
+#[component]
+pub fn CustomEditor(props: &CustomEditorProps) -> Html {
     let CustomEditorProps { text_model } = props;
 
     html! {
@@ -37,8 +37,8 @@ pub fn custom_editor(props: &CustomEditorProps) -> Html {
     }
 }
 
-#[function_component(App)]
-fn app() -> Html {
+#[component]
+fn App() -> Html {
     // Here's some "code" that will showcase some of
     // the decorations that can be applied to the text model.
     let code = String::from("This is just a normal line.\nThis is an error.\nThis line is highlighted.\nHover over this line to see a secret message.");