File tree 5 files changed +13
-13
lines changed
5 files changed +13
-13
lines changed Original file line number Diff line number Diff line change @@ -60,7 +60,7 @@ npx astro add react
60
60
61
61
> 💡 Add [ ` client:load ` ] ( https://docs.astro.build/es/reference/directives-reference/#clientload ) directive to the ` Toaster ` component.
62
62
63
- ``` js
63
+ ``` js {8,25}
64
64
// 📄 layouts/Layout.astro
65
65
66
66
-- -
@@ -118,7 +118,7 @@ export default ShowToast;
118
118
119
119
> 💡 Add [ ` client:load ` ] ( https://docs.astro.build/es/reference/directives-reference/#clientload ) directive to the ` ShowToast ` component.
120
120
121
- ``` js
121
+ ``` js {5,11}
122
122
// 📄 pages/index.astro
123
123
124
124
-- -
Original file line number Diff line number Diff line change @@ -20,7 +20,7 @@ category: "Introduction"
20
20
21
21
2 . Add the toast provider:
22
22
23
- ``` jsx {8}
23
+ ``` jsx {3, 8}
24
24
// 📃 main.tsx
25
25
26
26
import { Toaster } from ' @pheralb/toast' ;
@@ -35,7 +35,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
35
35
36
36
3 . Usage:
37
37
38
- ``` jsx {10-13}
38
+ ``` jsx {3, 10-13}
39
39
// 📃 index.tsx
40
40
41
41
import { toast } from " @pheralb/toast" ;
Original file line number Diff line number Diff line change @@ -35,7 +35,7 @@ npx create-next-app@latest
35
35
36
36
> 💡 By default, ` Toaster ` includes ` use client ` directive.
37
37
38
- ``` tsx {1,13 }
38
+ ``` tsx {3,14 }
39
39
// 📃 layout.tsx
40
40
41
41
import { Toaster } from " @pheralb/toast" ;
@@ -58,7 +58,7 @@ export default function RootLayout({
58
58
59
59
3 . Use the [ ` toast ` ] ( /toast ) function in your ** client** components:
60
60
61
- ``` tsx
61
+ ``` tsx {9-11}
62
62
" use client" ;
63
63
64
64
import { toast } from " @pheralb/toast" ;
@@ -82,7 +82,7 @@ export default function MyComponent() {
82
82
83
83
The library exports a CSS file that you can include in your project. Only use in cases where the toast styles do not render correctly:
84
84
85
- ``` tsx
85
+ ``` tsx {5}
86
86
// 📄 app/layout.tsx
87
87
88
88
import type { ReactNode } from " react" ;
Original file line number Diff line number Diff line change @@ -39,7 +39,7 @@ npx create-remix@latest
39
39
40
40
2 . Add the [ ` Toaster ` ] ( /toaster ) to the ` root.tsx ` file:
41
41
42
- ``` tsx
42
+ ``` tsx {3,16}
43
43
// 📃 root.tsx
44
44
45
45
import { Toaster } from " @pheralb/toast" ;
@@ -70,7 +70,7 @@ export default function App() {
70
70
71
71
3 . Use the [ ` toast ` ] ( /toast ) function in your components or pages:
72
72
73
- ``` tsx
73
+ ``` tsx {11-13}
74
74
// 📃 index.tsx
75
75
76
76
import { toast } from " @pheralb/toast" ;
@@ -99,7 +99,7 @@ The library exports a CSS file that you can include in your project. Only use in
99
99
100
100
> 💡 Add the following code to the ** global ` root.tsx ` file** .
101
101
102
- ``` tsx
102
+ ``` tsx {5}
103
103
// 📄 app/root.tsx
104
104
105
105
import type { LinksFunction } from " @remix-run/node" ;
Original file line number Diff line number Diff line change @@ -31,7 +31,7 @@ pnpm create @tanstack/router
31
31
32
32
2 . Add the [ ` Toaster ` ] ( /toaster ) to the ` routes/__root.tsx ` file:
33
33
34
- ``` tsx {13}
34
+ ``` tsx {3, 13}
35
35
import { Link , Outlet , createRootRoute } from " @tanstack/react-router" ;
36
36
import { TanStackRouterDevtools } from " @tanstack/router-devtools" ;
37
37
import { Toaster } from " @pheralb/toast" ;
@@ -53,7 +53,7 @@ function RootComponent() {
53
53
54
54
3 . Use the [ ` toast ` ] ( /toast ) function in your components or pages:
55
55
56
- ``` tsx
56
+ ``` tsx {2,14-16}
57
57
import { createFileRoute } from " @tanstack/react-router" ;
58
58
import { toast } from " @pheralb/toast" ;
59
59
@@ -85,7 +85,7 @@ The library exports a CSS file that you can include in your project. Only use in
85
85
86
86
> 💡 Add the following code to the ** global ` src/routes/__root.tsx ` file** .
87
87
88
- ``` tsx
88
+ ``` tsx {3,7}
89
89
// 📄 src/routes/__root.tsx
90
90
91
91
import pheralbToastStyles from " @pheralb/toast/dist/styles.css?url" ;
You can’t perform that action at this time.
0 commit comments