1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
#![cfg_attr(feature = "ssr", allow(unused_variables, unused_imports))]
use crate::core::MaybeRwSignal;
use cfg_if::cfg_if;
use default_struct_builder::DefaultBuilder;
use leptos::prelude::*;
use leptos::reactive::wrappers::read::Signal;
use wasm_bindgen::JsCast;
/// Reactive favicon.
///
/// ## Demo
///
/// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_favicon)
///
/// ## Usage
///
/// ```
/// # use leptos::prelude::*;
/// # use leptos_use::use_favicon;
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// #
/// let (icon, set_icon) = use_favicon();
///
/// set_icon.set(Some("dark.png".to_string())); // change current icon
/// #
/// # view! { }
/// # }
/// ```
///
/// ## Passing a Source Signal
///
/// You can pass a `Signal` to [`use_favicon_with_options`]. Change from the source signal will be
/// reflected in your favicon automatically.
///
/// ```
/// # use leptos::prelude::*;
/// # use leptos_use::{use_favicon_with_options, UseFaviconOptions, use_preferred_dark};
/// #
/// # #[component]
/// # fn Demo() -> impl IntoView {
/// #
/// let is_dark = use_preferred_dark();
///
/// let (icon, _) = use_favicon_with_options(
/// UseFaviconOptions::default().new_icon(
/// Signal::derive(move || {
/// Some((if is_dark.get() { "dark.png" } else { "light.png" }).to_string())
/// }),
/// )
/// );
/// #
/// # view! { }
/// # }
/// ```
///
/// ## Server-Side Rendering
///
/// On the server only the signals work but no favicon will be changed obviously.
pub fn use_favicon() -> (Signal<Option<String>>, WriteSignal<Option<String>>) {
use_favicon_with_options(UseFaviconOptions::default())
}
/// Version of [`use_favicon`] that accepts a `UseFaviconOptions`. See [`use_favicon`] for more details.
pub fn use_favicon_with_options(
options: UseFaviconOptions,
) -> (Signal<Option<String>>, WriteSignal<Option<String>>) {
let UseFaviconOptions {
new_icon,
base_url,
rel,
} = options;
let (favicon, set_favicon) = new_icon.into_signal();
cfg_if! { if #[cfg(not(feature = "ssr"))] {
let link_selector = format!("link[rel*=\"{rel}\"]");
let apply_icon = move |icon: &String| {
if let Some(head) = document().head() {
if let Ok(links) = head.query_selector_all(&link_selector) {
let href = format!("{base_url}{icon}");
for i in 0..links.length() {
let node = links.get(i).expect("checked length");
let link: web_sys::HtmlLinkElement = node.unchecked_into();
link.set_href(&href);
}
}
}
};
Effect::watch(
move || favicon.get(),
move |new_icon, prev_icon, _| {
if Some(new_icon) != prev_icon {
if let Some(new_icon) = new_icon {
apply_icon(new_icon);
}
}
},
false,
);
}}
(favicon, set_favicon)
}
/// Options for [`use_favicon_with_options`].
#[derive(DefaultBuilder)]
pub struct UseFaviconOptions {
/// New input favicon. Can be a `RwSignal` in which case updates will change the favicon. Defaults to None.
#[builder(into)]
new_icon: MaybeRwSignal<Option<String>>,
/// Base URL of the favicon. Defaults to "".
#[builder(into)]
base_url: String,
/// Rel attribute of the <link> tag. Defaults to "icon".
#[builder(into)]
rel: String,
}
impl Default for UseFaviconOptions {
fn default() -> Self {
Self {
new_icon: Default::default(),
base_url: "".to_string(),
rel: "icon".to_string(),
}
}
}