diff --git a/.gitignore b/.gitignore
index e1acdaf..3909f2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # directory ignores
 dist
 target
+.idea
 
 # file ignores
 Cargo.lock
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16a8efd..7ffbc97 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,9 @@ This changelog follows the patterns described here: https://keepachangelog.com/e
 
 ## Unreleased
 
+## 0.2.0 
+- Added support for yew `0.18.x`
+
 ## 0.1.6
 ### changed
 - Updates to the `Navbar` component:
diff --git a/Cargo.toml b/Cargo.toml
index 4701c76..fbc386c 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "ybc"
-version = "0.1.6"
+version = "0.2.0"
 description = "A Yew component library based on the Bulma CSS framework."
 authors = ["Anthony Dodd <dodd.anthonyjosiah@gmail.com>"]
 edition = "2018"
@@ -13,9 +13,9 @@ keywords = ["wasm", "web", "bulma", "sass", "yew"]
 [dependencies]
 derive_more = "0.99.9"
 web-sys = { version="0.3", features=["Element", "File", "HtmlCollection", "HtmlSelectElement"] }
-yew = { version="0.17.3", features=["web_sys"] }
-yewtil = { version="0.3.2", features=["neq"] }
-yew-router = { version="0.14.0", features=["web_sys"], optional=true }
+yew = { version="0.18.0", features=["web_sys"] }
+yewtil = { version="0.4.0", features=["neq"] }
+yew-router = { version="0.15.0", features=["web_sys"], optional=true }
 
 [features]
 default = ["router"]
diff --git a/src/columns/mod.rs b/src/columns/mod.rs
index 9364425..289d784 100644
--- a/src/columns/mod.rs
+++ b/src/columns/mod.rs
@@ -44,7 +44,7 @@ impl Component for Columns {
     fn view(&self) -> Html {
         let mut classes = Classes::from("columns");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.vcentered {
             classes.push("is-vcentered");
@@ -104,7 +104,7 @@ impl Component for Column {
     fn view(&self) -> Html {
         let mut classes = Classes::from("column");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
diff --git a/src/common.rs b/src/common.rs
index a4fb763..5b2e815 100644
--- a/src/common.rs
+++ b/src/common.rs
@@ -1,4 +1,6 @@
 use derive_more::Display;
+use std::borrow::Cow;
+use yew::html::IntoOptPropValue;
 
 /// Common alignment classes.
 #[derive(Clone, Debug, Display, PartialEq)]
@@ -25,3 +27,9 @@ pub enum Size {
     #[display(fmt = "large")]
     Large,
 }
+
+impl IntoOptPropValue<Cow<'static, str>> for Size {
+    fn into_opt_prop_value(self) -> Option<Cow<'static, str>> {
+        Some(Cow::from(self.to_string()))
+    }
+}
diff --git a/src/components/breadcrumb.rs b/src/components/breadcrumb.rs
index 32d39c4..42b85d1 100644
--- a/src/components/breadcrumb.rs
+++ b/src/components/breadcrumb.rs
@@ -48,7 +48,7 @@ impl Component for Breadcrumb {
     fn view(&self) -> Html {
         let mut classes = Classes::from("breadcrumb");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/components/card.rs b/src/components/card.rs
index 7571e25..1932444 100644
--- a/src/components/card.rs
+++ b/src/components/card.rs
@@ -35,7 +35,7 @@ impl Component for Card {
     fn view(&self) -> Html {
         let mut classes = Classes::from("card");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
@@ -82,7 +82,7 @@ impl Component for CardHeader {
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-header");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <header class=classes>
@@ -129,7 +129,7 @@ impl Component for CardImage {
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-image");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
@@ -176,7 +176,7 @@ impl Component for CardContent {
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-content");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
@@ -223,7 +223,7 @@ impl Component for CardFooter {
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-footer");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <footer class=classes>
diff --git a/src/components/dropdown.rs b/src/components/dropdown.rs
index 8203525..90e3296 100644
--- a/src/components/dropdown.rs
+++ b/src/components/dropdown.rs
@@ -68,7 +68,7 @@ impl Component for Dropdown {
     fn view(&self) -> Html {
         let mut classes = Classes::from("dropdown");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let opencb = if self.props.hoverable {
             classes.push("is-hoverable");
diff --git a/src/components/menu.rs b/src/components/menu.rs
index 8590b77..7f51c0a 100644
--- a/src/components/menu.rs
+++ b/src/components/menu.rs
@@ -35,7 +35,7 @@ impl Component for Menu {
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <aside class=classes>
@@ -83,7 +83,7 @@ impl Component for MenuList {
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu-list");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <ul class=classes>
@@ -131,7 +131,7 @@ impl Component for MenuLabel {
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu-label");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <p class=classes>
diff --git a/src/components/message.rs b/src/components/message.rs
index aaedb0e..3a4c783 100644
--- a/src/components/message.rs
+++ b/src/components/message.rs
@@ -35,7 +35,7 @@ impl Component for Message {
     fn view(&self) -> Html {
         let mut classes = Classes::from("message");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <article class=classes>
@@ -82,7 +82,7 @@ impl Component for MessageHeader {
     fn view(&self) -> Html {
         let mut classes = Classes::from("message-header");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
@@ -129,7 +129,7 @@ impl Component for MessageBody {
     fn view(&self) -> Html {
         let mut classes = Classes::from("message-body");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
diff --git a/src/components/modal.rs b/src/components/modal.rs
index 8c12be9..4c1ebf1 100644
--- a/src/components/modal.rs
+++ b/src/components/modal.rs
@@ -79,7 +79,7 @@ impl Component for Modal {
     fn view(&self) -> Html {
         let mut classes = Classes::from("modal");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let (opencb, closecb) = if self.is_active {
             classes.push("is-active");
@@ -181,7 +181,7 @@ impl Component for ModalCard {
     fn view(&self) -> Html {
         let mut classes = Classes::from("modal");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let (opencb, closecb) = if self.is_active {
             classes.push("is-active");
diff --git a/src/components/navbar.rs b/src/components/navbar.rs
index f0968ca..b71c0e6 100644
--- a/src/components/navbar.rs
+++ b/src/components/navbar.rs
@@ -89,7 +89,7 @@ impl Component for Navbar {
         // navbar classes
         let mut classes = Classes::from("navbar");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(fixed) = &self.props.fixed {
             classes.push(&fixed.to_string());
@@ -249,7 +249,7 @@ impl Component for NavbarItem {
         // navbar classes
         let mut classes = Classes::from("navbar-item");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.has_dropdown {
             classes.push("has-dropdown");
@@ -322,7 +322,7 @@ impl Component for NavbarDivider {
     fn view(&self) -> Html {
         let mut classes = Classes::from("navbar-divider");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <hr class=classes/>
@@ -402,7 +402,7 @@ impl Component for NavbarDropdown {
         // navbar-item classes
         let mut classes = Classes::from("navbar-item has-dropdown");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.dropup {
             classes.push("has-dropdown-up");
diff --git a/src/components/pagination.rs b/src/components/pagination.rs
index 5fc5656..72ec974 100644
--- a/src/components/pagination.rs
+++ b/src/components/pagination.rs
@@ -54,7 +54,7 @@ impl Component for Pagination {
     fn view(&self) -> Html {
         let mut classes = Classes::from("pagination");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/components/panel.rs b/src/components/panel.rs
index 0f1a1df..8b94543 100644
--- a/src/components/panel.rs
+++ b/src/components/panel.rs
@@ -41,7 +41,7 @@ impl Component for Panel {
     fn view(&self) -> Html {
         let mut classes = Classes::from("panel");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <nav class=classes>
diff --git a/src/components/tabs.rs b/src/components/tabs.rs
index 932f50b..7d9eca0 100644
--- a/src/components/tabs.rs
+++ b/src/components/tabs.rs
@@ -58,7 +58,7 @@ impl Component for Tabs {
     fn view(&self) -> Html {
         let mut classes = Classes::from("tabs");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(alignment) = &self.props.alignment {
             classes.push(&alignment.to_string());
diff --git a/src/elements/box.rs b/src/elements/box.rs
index c9f115f..a31b15e 100644
--- a/src/elements/box.rs
+++ b/src/elements/box.rs
@@ -35,7 +35,7 @@ impl Component for Box {
     fn view(&self) -> Html {
         let mut classes = Classes::from("box");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
diff --git a/src/elements/button.rs b/src/elements/button.rs
index dd6f66e..2efd986 100644
--- a/src/elements/button.rs
+++ b/src/elements/button.rs
@@ -40,7 +40,7 @@ impl Component for Buttons {
     fn view(&self) -> Html {
         let mut classes = Classes::from("buttons");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
@@ -116,7 +116,7 @@ impl Component for Button {
     fn view(&self) -> Html {
         let mut classes = Classes::from("button");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.loading {
             classes.push("is-loading")
@@ -314,7 +314,7 @@ impl Component for ButtonAnchor {
     fn view(&self) -> Html {
         let mut classes = Classes::from("button");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.loading {
             classes.push("is-loading")
@@ -384,7 +384,7 @@ impl Component for ButtonInputSubmit {
     fn view(&self) -> Html {
         let mut classes = Classes::from("button");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.loading {
             classes.push("is-loading")
@@ -445,7 +445,7 @@ impl Component for ButtonInputReset {
     fn view(&self) -> Html {
         let mut classes = Classes::from("button");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.loading {
             classes.push("is-loading")
diff --git a/src/elements/content.rs b/src/elements/content.rs
index 051abff..6122ad9 100644
--- a/src/elements/content.rs
+++ b/src/elements/content.rs
@@ -40,7 +40,7 @@ impl Component for Content {
     fn view(&self) -> Html {
         let mut classes = Classes::from("content");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let tag = self.props.tag.clone();
         html! {
diff --git a/src/elements/delete.rs b/src/elements/delete.rs
index f3f0987..b517c9b 100644
--- a/src/elements/delete.rs
+++ b/src/elements/delete.rs
@@ -43,7 +43,7 @@ impl Component for Delete {
     fn view(&self) -> Html {
         let mut classes = Classes::from("delete");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let tag = self.props.tag.clone();
         html! {
diff --git a/src/elements/icon.rs b/src/elements/icon.rs
index b7ed6b5..8eb2006 100644
--- a/src/elements/icon.rs
+++ b/src/elements/icon.rs
@@ -47,7 +47,7 @@ impl Component for Icon {
     fn view(&self) -> Html {
         let mut classes = Classes::from("icon");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/elements/image.rs b/src/elements/image.rs
index 9ebe431..e2d25a0 100644
--- a/src/elements/image.rs
+++ b/src/elements/image.rs
@@ -39,7 +39,7 @@ impl Component for Image {
     fn view(&self) -> Html {
         let mut classes = Classes::from("image");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/elements/notification.rs b/src/elements/notification.rs
index ed6cb92..fd47600 100644
--- a/src/elements/notification.rs
+++ b/src/elements/notification.rs
@@ -35,7 +35,7 @@ impl Component for Notification {
     fn view(&self) -> Html {
         let mut classes = Classes::from("notification");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <div class=classes>
diff --git a/src/elements/progress.rs b/src/elements/progress.rs
index e9a5bac..6127237 100644
--- a/src/elements/progress.rs
+++ b/src/elements/progress.rs
@@ -41,7 +41,7 @@ impl Component for Progress {
     fn view(&self) -> Html {
         let mut classes = Classes::from("progress");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let max = self.props.max.to_string();
         let value = self.props.value.to_string();
diff --git a/src/elements/table.rs b/src/elements/table.rs
index 9a3908d..71be197 100644
--- a/src/elements/table.rs
+++ b/src/elements/table.rs
@@ -53,7 +53,7 @@ impl Component for Table {
     fn view(&self) -> Html {
         let mut classes = Classes::from("table");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.bordered {
             classes.push("is-bordered");
diff --git a/src/elements/tag.rs b/src/elements/tag.rs
index aa0b295..5f6e902 100644
--- a/src/elements/tag.rs
+++ b/src/elements/tag.rs
@@ -54,7 +54,7 @@ impl Component for Tag {
     fn view(&self) -> Html {
         let mut classes = Classes::from("tag");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.rounded {
             classes.push("is-rounded");
@@ -114,7 +114,7 @@ impl Component for Tags {
     fn view(&self) -> Html {
         let mut classes = Classes::from("tags");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.has_addons {
             classes.push("has-addons");
diff --git a/src/elements/title.rs b/src/elements/title.rs
index eb33903..5fd30cf 100644
--- a/src/elements/title.rs
+++ b/src/elements/title.rs
@@ -47,7 +47,7 @@ impl Component for Title {
     fn view(&self) -> Html {
         let mut classes = Classes::from("title");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
@@ -107,7 +107,7 @@ impl Component for Subtitle {
     fn view(&self) -> Html {
         let mut classes = Classes::from("subtitle");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra)
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/form/checkbox.rs b/src/form/checkbox.rs
index 983c23c..62cdbff 100644
--- a/src/form/checkbox.rs
+++ b/src/form/checkbox.rs
@@ -50,7 +50,7 @@ impl Component for Checkbox {
     fn view(&self) -> Html {
         let mut classes = Classes::from("checkbox");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         let checked = self.props.checked;
         html! {
diff --git a/src/form/control.rs b/src/form/control.rs
index 9dce548..c9a53cd 100644
--- a/src/form/control.rs
+++ b/src/form/control.rs
@@ -43,7 +43,7 @@ impl Component for Control {
     fn view(&self) -> Html {
         let mut classes = Classes::from("control");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.expanded {
             classes.push("is-expanded");
diff --git a/src/form/field.rs b/src/form/field.rs
index ad1d6f7..cfb4621 100644
--- a/src/form/field.rs
+++ b/src/form/field.rs
@@ -67,7 +67,7 @@ impl Component for Field {
     fn view(&self) -> Html {
         let mut classes = Classes::from("field");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.icons_left {
             classes.push("has-icons-left");
@@ -171,7 +171,7 @@ impl Component for FieldHorizontal {
         // field classes
         let mut classes = Classes::from("field is-horizontal");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
 
         // label classes
diff --git a/src/form/file.rs b/src/form/file.rs
index bf4a8f5..ae69b78 100644
--- a/src/form/file.rs
+++ b/src/form/file.rs
@@ -82,7 +82,7 @@ impl Component for File {
     fn view(&self) -> Html {
         let mut classes = Classes::from("file");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.has_name.is_some() {
             classes.push("has-name");
diff --git a/src/form/input.rs b/src/form/input.rs
index e6dc9b1..d4d5fa9 100644
--- a/src/form/input.rs
+++ b/src/form/input.rs
@@ -76,7 +76,7 @@ impl Component for Input {
     fn view(&self) -> Html {
         let mut classes = Classes::from("input");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/form/radio.rs b/src/form/radio.rs
index 18516fe..20438c1 100644
--- a/src/form/radio.rs
+++ b/src/form/radio.rs
@@ -58,7 +58,7 @@ impl Component for Radio {
     fn view(&self) -> Html {
         let mut classes = Classes::from("radio");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <label class=classes disabled=self.props.disabled>
diff --git a/src/form/select.rs b/src/form/select.rs
index e9607da..027d853 100644
--- a/src/form/select.rs
+++ b/src/form/select.rs
@@ -65,7 +65,7 @@ impl Component for Select {
     fn view(&self) -> Html {
         let mut classes = Classes::from("select");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
@@ -93,7 +93,7 @@ impl Component for Select {
 //////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
-#[derive(Clone, Debug, Properties, PartialEq)]
+#[derive(Properties, Clone, PartialEq)]
 pub struct MultiSelectProps {
     /// The `name` attribute for this form element.
     pub name: String,
@@ -155,7 +155,7 @@ impl Component for MultiSelect {
     fn view(&self) -> Html {
         let mut classes = Classes::from("select is-multiple");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
@@ -163,11 +163,13 @@ impl Component for MultiSelect {
         if self.props.loading {
             classes.push("is-loading");
         }
+
+        let size: String = self.props.list_size.to_string();
         html! {
             <div class=classes>
                 <select
                     multiple=true
-                    size=self.props.list_size
+                    size=size
                     name=self.props.name.clone()
                     value=self.props.value.join(",")
                     onchange=self.link.callback(|change: ChangeData| match change {
diff --git a/src/form/textarea.rs b/src/form/textarea.rs
index bf89915..df89793 100644
--- a/src/form/textarea.rs
+++ b/src/form/textarea.rs
@@ -3,6 +3,7 @@ use yew::prelude::*;
 use yewtil::NeqAssign;
 
 use crate::Size;
+use std::borrow::Cow;
 
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct TextAreaProps {
@@ -50,8 +51,8 @@ pub struct TextAreaProps {
 /// be provided from a parent component, and changes to this component are propagated to the parent
 /// component via callback.
 pub struct TextArea {
-    props: TextAreaProps,
     link: ComponentLink<Self>,
+    props: TextAreaProps,
 }
 
 impl Component for TextArea {
@@ -59,7 +60,7 @@ impl Component for TextArea {
     type Properties = TextAreaProps;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self { props, link }
+        Self { link, props }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -74,7 +75,7 @@ impl Component for TextArea {
     fn view(&self) -> Html {
         let mut classes = Classes::from("textarea");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
@@ -88,13 +89,15 @@ impl Component for TextArea {
         if self.props.fixed_size {
             classes.push("has-fixed-size");
         }
+
+        let rows = Cow::from(self.props.rows.to_string());
         html! {
             <textarea
                 name=self.props.name.clone()
                 value=self.props.value.clone()
                 oninput=self.link.callback(|input: InputData| input.value)
                 class=classes
-                rows=self.props.rows
+                rows=rows
                 placeholder=self.props.placeholder.clone()
                 disabled=self.props.disabled
                 readonly=self.props.readonly
diff --git a/src/layout/container.rs b/src/layout/container.rs
index 5789a88..3b827f7 100644
--- a/src/layout/container.rs
+++ b/src/layout/container.rs
@@ -38,7 +38,7 @@ impl Component for Container {
     fn view(&self) -> Html {
         let mut classes = Classes::from("container");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.fluid {
             classes.push("is-fluid");
diff --git a/src/layout/footer.rs b/src/layout/footer.rs
index 4913269..c2003d7 100644
--- a/src/layout/footer.rs
+++ b/src/layout/footer.rs
@@ -35,7 +35,7 @@ impl Component for Footer {
     fn view(&self) -> Html {
         let mut classes = Classes::from("footer");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <footer class=classes>
diff --git a/src/layout/hero.rs b/src/layout/hero.rs
index 9c8f32a..e3b20db 100644
--- a/src/layout/hero.rs
+++ b/src/layout/hero.rs
@@ -56,7 +56,7 @@ impl Component for Hero {
     fn view(&self) -> Html {
         let mut classes = Classes::from("hero");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if self.props.fixed_nav {
             classes.push("is-fullheight-with-navbar");
diff --git a/src/layout/level.rs b/src/layout/level.rs
index da7cd66..426f621 100644
--- a/src/layout/level.rs
+++ b/src/layout/level.rs
@@ -40,7 +40,7 @@ impl Component for Level {
     fn view(&self) -> Html {
         let mut classes = Classes::from("level");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -90,7 +90,7 @@ impl Component for LevelLeft {
     fn view(&self) -> Html {
         let mut classes = Classes::from("level-left");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -140,7 +140,7 @@ impl Component for LevelRight {
     fn view(&self) -> Html {
         let mut classes = Classes::from("level-right");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -190,7 +190,7 @@ impl Component for LevelItem {
     fn view(&self) -> Html {
         let mut classes = Classes::from("level-item");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
diff --git a/src/layout/media.rs b/src/layout/media.rs
index 658a76c..47bf552 100644
--- a/src/layout/media.rs
+++ b/src/layout/media.rs
@@ -40,7 +40,7 @@ impl Component for Media {
     fn view(&self) -> Html {
         let mut classes = Classes::from("media");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -90,7 +90,7 @@ impl Component for MediaLeft {
     fn view(&self) -> Html {
         let mut classes = Classes::from("media-left");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -140,7 +140,7 @@ impl Component for MediaRight {
     fn view(&self) -> Html {
         let mut classes = Classes::from("media-right");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
@@ -190,7 +190,7 @@ impl Component for MediaContent {
     fn view(&self) -> Html {
         let mut classes = Classes::from("media-content");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         html! {
             <@{self.props.tag.clone()} class=classes>
diff --git a/src/layout/section.rs b/src/layout/section.rs
index c33e290..788ef8d 100644
--- a/src/layout/section.rs
+++ b/src/layout/section.rs
@@ -39,7 +39,7 @@ impl Component for Section {
     fn view(&self) -> Html {
         let mut classes = Classes::from("section");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
diff --git a/src/layout/tile.rs b/src/layout/tile.rs
index b43746a..ff22e32 100644
--- a/src/layout/tile.rs
+++ b/src/layout/tile.rs
@@ -56,7 +56,7 @@ impl Component for Tile {
     fn view(&self) -> Html {
         let mut classes = Classes::from("tile");
         if let Some(extra) = &self.props.classes {
-            classes = classes.extend(extra);
+            classes.push(extra);
         }
         if let Some(ctx) = &self.props.ctx {
             classes.push(&ctx.to_string());