Notification

Reactive

Notification API

Usage

<script>
    import { notification } from "@sveu/browser"

    const { supported, notify, show, close, onClick, onShow, onError, onClose } = notification()
</script>
<script>
    import { notification } from "@sveu/browser"

    const { supported, notify, show, close, onClick, onShow, onError, onClose } = notification()
</script>
svelte

Example

supported: false











<script>
    import { notification } from "@sveu/browser"

    const options = {
        title: "Hello World from Svelte Utility!",

        body: "This is a notification from Svelte Utility!",

        icon: "https://avatars.githubusercontent.com/u/120715197?s=200&v=4",

        dir: "auto",

        lang: "ar",

        renotify: true,

        tag: "test",

        requireInteraction: false,

        silent: false,
    }

    $: ({ supported, show, notify } = notification(options))
</script>

<h1>supported: {$supported}</h1>

<br />

<label for="title">Title</label>
<input
    type="text"
    bind:value="{options.title}"
    id="title"
    />

<br />

<label for="body">Body</label>
<input
    type="text"
    bind:value="{options.body}"
    id="body"
    />

<br />

<label for="icon">Icon</label>
<input
    type="text"
    bind:value="{options.icon}"
    id="icon"
    />

<br />

<label for="dir">Direction</label>

<select bind:value="{options.dir}" id="dir">
    <option value="auto">auto</option>
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
</select>

<br />

<label for="lang">Language</label>
<input
    type="text"
    bind:value="{options.lang}"
    id="lang"
    />

<br />

<label for="renotify">Renotify</label>
<input
    type="checkbox"
    bind:checked="{options.renotify}"
    id="renotify"
    />

<br />

<label for="tag">Tag</label>
<input
    type="text"
    bind:value="{options.tag}"
    id="tag"
    />

<br />

<label for="requireInteraction">Require Interaction</label>
<input
    type="checkbox"
    bind:checked="{options.requireInteraction}"
    id="requireInteraction"
    />

<br />

<label for="silent">Silent</label>
<input
    type="checkbox"
    bind:checked="{options.silent}"
    id="silent"
    />

<br />

<button
    on:click="{() => show()}">
    Show Notification
</button>
<script>
    import { notification } from "@sveu/browser"

    const options = {
        title: "Hello World from Svelte Utility!",

        body: "This is a notification from Svelte Utility!",

        icon: "https://avatars.githubusercontent.com/u/120715197?s=200&v=4",

        dir: "auto",

        lang: "ar",

        renotify: true,

        tag: "test",

        requireInteraction: false,

        silent: false,
    }

    $: ({ supported, show, notify } = notification(options))
</script>

<h1>supported: {$supported}</h1>

<br />

<label for="title">Title</label>
<input
    type="text"
    bind:value="{options.title}"
    id="title"
    />

<br />

<label for="body">Body</label>
<input
    type="text"
    bind:value="{options.body}"
    id="body"
    />

<br />

<label for="icon">Icon</label>
<input
    type="text"
    bind:value="{options.icon}"
    id="icon"
    />

<br />

<label for="dir">Direction</label>

<select bind:value="{options.dir}" id="dir">
    <option value="auto">auto</option>
    <option value="ltr">ltr</option>
    <option value="rtl">rtl</option>
</select>

<br />

<label for="lang">Language</label>
<input
    type="text"
    bind:value="{options.lang}"
    id="lang"
    />

<br />

<label for="renotify">Renotify</label>
<input
    type="checkbox"
    bind:checked="{options.renotify}"
    id="renotify"
    />

<br />

<label for="tag">Tag</label>
<input
    type="text"
    bind:value="{options.tag}"
    id="tag"
    />

<br />

<label for="requireInteraction">Require Interaction</label>
<input
    type="checkbox"
    bind:checked="{options.requireInteraction}"
    id="requireInteraction"
    />

<br />

<label for="silent">Silent</label>
<input
    type="checkbox"
    bind:checked="{options.silent}"
    id="silent"
    />

<br />

<button
    on:click="{() => show()}">
    Show Notification
</button>
svelte
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
Click fold/expand code

API

Options

See Notification API

Returns

Name Description Type
supported Whether the browser supports the Notification API. Readable<boolean>
notify The notification instance. Readable<Notification>
show Show the notification. () => void
close Close the notification. () => void
onClick The click event. EventHookOn<any>
onShow The show event. EventHookOn<any>
onError The error event. EventHookOn<any>
onClose The close event. EventHookOn<any>
Last update at: Invalid Date