2024-05-07 12:41:44 +01:00
|
|
|
use leptos::prelude::*;
|
2023-10-23 23:49:11 -05:00
|
|
|
use leptos_use::docs::{demo_or_body, BooleanDisplay};
|
|
|
|
use leptos_use::{
|
|
|
|
use_web_notification_with_options, NotificationDirection, ShowOptions,
|
|
|
|
UseWebNotificationOptions, UseWebNotificationReturn,
|
|
|
|
};
|
|
|
|
|
|
|
|
#[component]
|
|
|
|
fn Demo() -> impl IntoView {
|
|
|
|
let UseWebNotificationReturn {
|
|
|
|
is_supported, show, ..
|
|
|
|
} = use_web_notification_with_options(
|
|
|
|
UseWebNotificationOptions::default()
|
|
|
|
.title("Hello World from leptos-use")
|
|
|
|
.direction(NotificationDirection::Auto)
|
|
|
|
.language("en")
|
2024-07-31 21:47:38 -04:00
|
|
|
.renotify(true)
|
2023-10-23 23:49:11 -05:00
|
|
|
.tag("test"),
|
|
|
|
);
|
|
|
|
|
|
|
|
let show = move || {
|
|
|
|
show(ShowOptions::default());
|
|
|
|
};
|
|
|
|
|
|
|
|
view! {
|
|
|
|
<div>
|
2023-10-24 00:44:23 -05:00
|
|
|
<p>Supported: <BooleanDisplay value=is_supported/></p>
|
2023-10-23 23:49:11 -05:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<Show
|
|
|
|
when=is_supported
|
2023-10-24 00:44:23 -05:00
|
|
|
fallback=|| {
|
|
|
|
view! { <div>The Notification Web API is not supported in your browser.</div> }
|
2023-10-23 23:49:11 -05:00
|
|
|
}
|
|
|
|
>
|
2023-10-24 00:44:23 -05:00
|
|
|
|
2023-10-23 23:49:11 -05:00
|
|
|
<button on:click={
|
|
|
|
let show = show.clone();
|
|
|
|
move |_| show()
|
2023-10-24 00:44:23 -05:00
|
|
|
}>Show Notification</button>
|
2023-10-23 23:49:11 -05:00
|
|
|
</Show>
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fn main() {
|
|
|
|
_ = console_log::init_with_level(log::Level::Debug);
|
|
|
|
console_error_panic_hook::set_once();
|
|
|
|
|
2024-08-22 17:47:06 +01:00
|
|
|
let unmount_handle = leptos::mount::mount_to(demo_or_body(), || {
|
2023-10-23 23:49:11 -05:00
|
|
|
view! { <Demo/> }
|
2024-08-22 17:47:06 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
unmount_handle.forget();
|
2023-10-23 23:49:11 -05:00
|
|
|
}
|