the universal sandbox runtime for agents and humans.
pocketenv.io
sandbox
openclaw
agent
claude-code
vercel-sandbox
deno-sandbox
cloudflare-sandbox
atproto
sprites
daytona
Instantiate Notyf at module scope
+25
-32
+25
-32
apps/web/src/hooks/useNotyf.ts
+25
-32
apps/web/src/hooks/useNotyf.ts
···
1
-
import { useRef } from "react";
2
1
import { Notyf } from "notyf";
3
2
4
-
export function useNotyf() {
5
-
const notyfRef = useRef<Notyf | null>(null);
6
-
7
-
if (!notyfRef.current) {
8
-
notyfRef.current = new Notyf({
9
-
duration: 3000,
10
-
position: {
11
-
x: "right",
12
-
y: "bottom",
3
+
const notyf = new Notyf({
4
+
duration: 3000,
5
+
position: {
6
+
x: "right",
7
+
y: "bottom",
8
+
},
9
+
types: [
10
+
{
11
+
type: "primary",
12
+
background: "var(--color-primary)",
13
+
icon: {
14
+
className: "icon-[tabler--circle-check] text-white!",
15
+
tagName: "i",
16
+
},
17
+
},
18
+
{
19
+
type: "error",
20
+
background: "var(--color-error)",
21
+
icon: {
22
+
className: "icon-[tabler--circle-x] text-white!",
23
+
tagName: "i",
13
24
},
14
-
types: [
15
-
{
16
-
type: "primary",
17
-
background: "var(--color-primary)",
18
-
icon: {
19
-
className: "icon-[tabler--circle-check] text-white!",
20
-
tagName: "i",
21
-
},
22
-
},
23
-
{
24
-
type: "error",
25
-
background: "var(--color-error)",
26
-
icon: {
27
-
className: "icon-[tabler--circle-x] text-white!",
28
-
tagName: "i",
29
-
},
30
-
},
31
-
],
32
-
});
33
-
}
25
+
},
26
+
],
27
+
});
34
28
35
-
const notyf = notyfRef.current;
36
-
29
+
export function useNotyf() {
37
30
const open = (
38
31
type: string,
39
32
message: string,