Add use_favicon (#8)

README.md

@@ -92,6 +92,7 @@ fn counter() -> Html {
 - `use_async` - resolves an `async` future, e.g. fetching REST api.
 - `use_web_socket` - communicates with `WebSocket`.
 - `use_title` - sets title of the page.
+- `use_favicon` - sets favicon of the page.
 - `use_local_storage` - manages a value in `localStorage`.
 - `use_session_storage` - manages a value in `sessionStorage`.
 - `use_before_unload` - shows browser alert when user try to reload or close the page.

crates/yew-hooks/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew-hooks"
-version = "0.1.52"
+version = "0.1.53"
 edition = "2018"
 authors = ["Jet Li <jing.i.qin@icloud.com>"]
 categories = ["gui", "wasm", "web-programming"]
@@ -48,6 +48,8 @@ features = [
     "TimeRanges",
     "Touch",
     "TouchList",
+    "HtmlLinkElement",
+    "HtmlCollection",
 ]
 
 [dev-dependencies]

crates/yew-hooks/src/hooks/mod.rs

@@ -11,6 +11,7 @@ mod use_drop;
 mod use_effect_once;
 mod use_effect_update;
 mod use_event;
+mod use_favicon;
 mod use_geolocation;
 mod use_hash;
 mod use_interval;
@@ -63,6 +64,7 @@ pub use use_drop::*;
 pub use use_effect_once::*;
 pub use use_effect_update::*;
 pub use use_event::*;
+pub use use_favicon::*;
 pub use use_geolocation::*;
 pub use use_hash::*;
 pub use use_interval::*;

crates/yew-hooks/src/hooks/use_favicon.rs

@@ -0,0 +1,53 @@
+use gloo::utils::document;
+use web_sys::{HtmlLinkElement, Node};
+
+use wasm_bindgen::{JsCast, UnwrapThrowExt};
+use yew::prelude::*;
+
+/// A side-effect hook that sets favicon of the page.
+///
+/// # Example
+///
+/// ```rust
+/// # use yew::prelude::*;
+/// #
+/// use yew_hooks::use_favicon;
+///
+/// #[function_component(Favicon)]
+/// fn favicon() -> Html {
+///     use_favicon("https://crates.io/favicon.ico".to_string());
+///     
+///     html! {
+///         <>
+///         </>
+///     }
+/// }
+/// ```
+pub fn use_favicon(href: String) {
+    use_effect_with_deps(
+        move |href| {
+            let link = {
+                if let Ok(Some(link)) = document().query_selector("link[rel*='icon']") {
+                    link
+                } else {
+                    document().create_element("link").unwrap_throw()
+                }
+            }
+            .dyn_into::<HtmlLinkElement>()
+            .unwrap_throw();
+
+            link.set_type("image/x-icon");
+            link.set_rel("shortcut icon");
+            link.set_href(href);
+
+            let head = document()
+                .get_elements_by_tag_name("head")
+                .item(0)
+                .unwrap_throw();
+            let _ = head.append_child(&link.dyn_into::<Node>().unwrap_throw());
+
+            || ()
+        },
+        href,
+    )
+}

examples/yew-app/src/routes/home.rs

@@ -38,6 +38,7 @@ pub fn home() -> Html {
                         <li><Link<AppRoute> to={AppRoute::UseAsync} classes="app-link" >{ "use_async" }</Link<AppRoute>> { " - resolves an async future, e.g. fetching REST api." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseWebSocket} classes="app-link" >{ "use_web_socket" }</Link<AppRoute>> { " - communicates with WebSocket." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseTitle} classes="app-link" >{ "use_title" }</Link<AppRoute>> { " - sets title of the page." }</li>
+                        <li><Link<AppRoute> to={AppRoute::UseFavicon} classes="app-link" >{ "use_favicon" }</Link<AppRoute>> { " - sets favicon of the page." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseLocalStorage} classes="app-link" >{ "use_local_storage" }</Link<AppRoute>> { " - manages a value in localStorage." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseSessionStorage} classes="app-link" >{ "use_session_storage" }</Link<AppRoute>> { " - manages a value in sessionStorage." }</li>
                         <li><Link<AppRoute> to={AppRoute::UseBeforeUnload} classes="app-link" >{ "use_before_unload" }</Link<AppRoute>> { " - shows browser alert when user try to reload or close the page." }</li>

examples/yew-app/src/routes/hooks/mod.rs

@@ -12,6 +12,7 @@ mod use_drop;
 mod use_effect_once;
 mod use_effect_update;
 mod use_event;
+mod use_favicon;
 mod use_geolocation;
 mod use_hash;
 mod use_interval;
@@ -66,6 +67,7 @@ pub use use_drop::*;
 pub use use_effect_once::*;
 pub use use_effect_update::*;
 pub use use_event::*;
+pub use use_favicon::*;
 pub use use_geolocation::*;
 pub use use_hash::*;
 pub use use_interval::*;

examples/yew-app/src/routes/hooks/use_favicon.rs

@@ -0,0 +1,13 @@
+use yew::prelude::*;
+
+use yew_hooks::use_favicon;
+
+/// `use_favicon` demo
+#[function_component(UseFavicon)]
+pub fn favicon() -> Html {
+    use_favicon("https://crates.io/favicon.ico".to_string());
+
+    html! {
+        <>{ "View the favicon of this page" }</>
+    }
+}

examples/yew-app/src/routes/mod.rs

@@ -120,6 +120,8 @@ pub enum AppRoute {
     UseDebounceEffect,
     #[at("/use_throttle_effect")]
     UseThrottleEffect,
+    #[at("/use_favicon")]
+    UseFavicon,
     #[not_found]
     #[at("/page-not-found")]
     PageNotFound,
@@ -185,6 +187,7 @@ pub fn switch(routes: &AppRoute) -> Html {
         AppRoute::UseThrottleState => html! { <UseThrottleState /> },
         AppRoute::UseDebounceEffect => html! { <UseDebounceEffect /> },
         AppRoute::UseThrottleEffect => html! { <UseThrottleEffect /> },
+        AppRoute::UseFavicon => html! { <UseFavicon /> },
         AppRoute::PageNotFound => html! { <Home /> },
     }
 }