You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
exportdefault ({ children, meta }) => <Layoutmeta={meta}>{children}</Layout>;
9
+
10
+
# `<ToasterBar />` API
11
+
12
+
This is the **default toast component** rendered by the [Toaster](/docs/toaster). You can use this component in a [Toaster](/docs/toaster) with a custom render function to overwrite its defaults.
13
+
14
+
## Available options
15
+
16
+
```jsx
17
+
<ToastBar
18
+
toast={t}
19
+
style={{}} // Overwrite styles
20
+
position="top-center"// Used to adapt the animation
21
+
/>
22
+
```
23
+
24
+
## Add custom content
25
+
26
+
You can add a **render function to the ToastBar to modify its content**. An object containing The `icon` as well as the `message` are passed into the function.
27
+
28
+
### Add a dismiss button
29
+
30
+
In this example we add a basic dismiss button to all toasts, except if the loading one.
Copy file name to clipboardExpand all lines: site/pages/docs/toast.mdx
+59-34Lines changed: 59 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,38 @@ export const meta = {
7
7
8
8
# `toast()` API
9
9
10
-
Call it to create a toast from anywhere, even outside React. Make sure you add the `<Toaster/>` component to your app first.
10
+
Call it to create a toast from anywhere, even outside React. Make sure you add the [`<Toaster/>`](/docs/toaster) component to your app first.
11
+
12
+
## Available toast options
13
+
14
+
You can provide `ToastOptions` as the second argument. They will overwrite all options received from [`<Toaster/>`](/docs/toaster).
15
+
16
+
```js
17
+
toast('Hello World', {
18
+
duration:4000,
19
+
20
+
// Styling
21
+
style: {},
22
+
className:'',
23
+
24
+
// Custom Icon
25
+
icon:'👏',
26
+
27
+
// Change colors of success/error/loading icon
28
+
iconTheme: {
29
+
primary:'#000',
30
+
secondary:'#fff',
31
+
},
32
+
33
+
// Aria
34
+
ariaProps: {
35
+
role:'status',
36
+
'aria-live':'polite',
37
+
},
38
+
});
39
+
```
40
+
41
+
## Creating a toast
11
42
12
43
### Blank
13
44
@@ -23,23 +54,31 @@ The most basic variant. It does not have an icon by default, but you can provide
23
54
toast.success('Successfully created!');
24
55
```
25
56
26
-
Creates a notification with an animated checkmark. It can be themed with `iconTheme`.
57
+
Creates a notification with an animated checkmark. It can be themed with the `iconTheme` option.
27
58
28
59
### Error
29
60
30
61
```js
31
62
toast.error('This is an error!');
32
63
```
33
64
34
-
Creates a notification with an animated error icon. It can be themed with `iconTheme`.
65
+
Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
66
+
67
+
### Custom (JSX)
68
+
69
+
```js
70
+
toast.custom(<div>Hello World</div>);
71
+
```
72
+
73
+
Creates a custom notification with JSX without default styles.
35
74
36
75
### Loading
37
76
38
77
```js
39
78
toast.loading('Waiting...');
40
79
```
41
80
42
-
This will create a loading notification. Most likely you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
81
+
This will create a loading notification. Most likely, you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
43
82
44
83
### Promise
45
84
@@ -83,42 +122,16 @@ toast.promise(
83
122
);
84
123
```
85
124
86
-
## Available options
87
-
88
-
You can provide `ToastOptions` as second argument. They will overwrite all options received from `<Toaster/>`.
89
-
90
-
```js
91
-
toast('Hello World', {
92
-
duration:4000,
93
-
94
-
// Styling
95
-
style: {},
96
-
className:'',
97
-
98
-
// Custom Icon
99
-
icon:'👏',
100
-
101
-
// Change colors of success/error/loading icon
102
-
iconTheme: {
103
-
primary:'#000',
104
-
secondary:'#fff',
105
-
},
106
-
107
-
// Aria
108
-
role:'status',
109
-
ariaLive:'polite',
110
-
});
111
-
```
112
-
113
125
## Default durations
114
126
115
-
Every type has their own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
127
+
Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [`<Toaster/>`](/docs/toaster).
116
128
117
129
| type | duration |
118
130
| --------- | -------- |
119
131
|`blank`| 4000 |
120
132
|`error`| 4000 |
121
133
|`success`| 2000 |
134
+
|`custom`| 4000 |
122
135
|`loading`| Infinity |
123
136
124
137
### Dismiss toast programmatically
@@ -157,6 +170,8 @@ toast.remove()
157
170
158
171
### Update an existing toast
159
172
173
+
Each toast call returns a unique id. Use in the toast options to update the existing toast.
To prevent duplicates of the same kind, you can provide a unique permanent id.
188
+
189
+
```js
190
+
toast.success('Copied to clipboard!', {
191
+
id:'clipboard',
192
+
});
193
+
```
194
+
170
195
### Render JSX custom content
171
196
172
-
You can provide a React components instead of text.
197
+
You can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.
173
198
174
199
```jsx
175
200
toast(
@@ -182,7 +207,7 @@ toast(
182
207
);
183
208
```
184
209
185
-
You can also supply a function that receives the `Toast` as argument. This can be usefull to add a custom dismiss button.
210
+
You can also supply a function that receives the `Toast` as an argument, giving you access to all properties. This allows you to access the toast id, which can be used to add a dismiss button.
0 commit comments