Skip to content

Commit 7c963cc

Browse files
pheralbpheralb
committed
docs: prepare ToastOptions documentation
1 parent 6726a04 commit 7c963cc

File tree

3 files changed

+90
-41
lines changed

3 files changed

+90
-41
lines changed

‎docs/src/content/options.mdx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: 'Toast Options'
3+
description: 'The <Toaster /> component is used to show toasts in your application'
4+
category: 'Customization'
5+
---
6+
7+
```tsx
8+
import { Toaster } from '@pheralb/toast';
9+
10+
<Toaster
11+
toastOptions={
12+
{
13+
// Your custom config.
14+
}
15+
}
16+
/>;
17+
```
18+
19+
## `font`
20+
21+
By default, the font of the toasts is:
22+
23+
```txt
24+
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
25+
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
26+
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
27+
```
28+
29+
You can change this value using the `font` property. In this case, we are using the utility class [`font-sans` from Tailwind CSS](https://tailwindcss.com/docs/font-family#setting-the-font-family) to set the font:
30+
31+
```jsx
32+
<Toaster
33+
toastOptions={{
34+
font: 'font-sans',
35+
}}
36+
/>
37+
```
38+
39+
## `icons`
40+
41+
`@pheralb/toast` use [Phosphor Icons](https://phosphoricons.com/) by default. You can change the default icons for all toasts using `icons` property:
42+
43+
```tsx
44+
<Toaster
45+
toastOptions={{
46+
icons: {
47+
info: <Info className="dark:text-blue-500" />,
48+
error: <CircleX className="text-red-500" />,
49+
warning: <CircleAlert className="text-yellow-500" />,
50+
success: <CircleCheck className="text-green-500" />,
51+
loading: <Loader className="animate-spin text-gray-500" />,
52+
},
53+
}}
54+
/>
55+
```
56+
57+
> 💡 To modify the icon of a **single** toast: [``toast - Custom Icon``](/toast#custom-icon)
58+
59+
## Styling
60+
61+
To customize toasts with personalized styles:
62+
63+
1. Activate the `headless` property.
64+
2. Use the `classNames` property.
65+
66+
```tsx
67+
<Toaster
68+
toastOptions={{
69+
headless: true,
70+
classNames: {
71+
toast: '',
72+
container: '',
73+
icon: '',
74+
content: '',
75+
actions: '',
76+
},
77+
}}
78+
/>
79+
```

‎docs/src/content/toaster.mdx

+7-41
Original file line numberDiff line numberDiff line change
@@ -32,48 +32,14 @@ By default, the maximum number of toasts is set to `4`. You can change this valu
3232
<Toaster maxToasts={8} />
3333
```
3434

35-
## ToastFont
36-
37-
By default, the font of the toasts is:
38-
39-
```txt
40-
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
41-
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
42-
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
43-
```
44-
45-
You can change this value using the `toastFont` prop. In this case, we are using the utility class [`font-sans` from Tailwind CSS](https://tailwindcss.com/docs/font-family#setting-the-font-family) to set the font:
46-
47-
```jsx
48-
<Toaster toastFont="font-sans" />
49-
```
50-
51-
## ToastIcons
52-
53-
`@pheralb/toast` use [Phosphor Icons](https://phosphoricons.com/) by default. You can change the default icons for all toasts using `toastIcons` property:
54-
55-
```tsx
56-
<Toaster
57-
toastIcons={{
58-
info: <Info className="dark:text-blue-500" />,
59-
error: <CircleX className="text-red-500" />,
60-
warning: <CircleAlert className="text-yellow-500" />,
61-
success: <CircleCheck className="text-green-500" />,
62-
loading: <Loader className="animate-spin text-gray-500" />,
63-
}}
64-
/>
65-
```
66-
67-
> 💡 To change the icon of a specific toast [click here](/toast#custom-icon)
68-
6935
## API Reference
7036

7137
The `<Toaster />` component accepts the following options:
7238

73-
| Property | Description | Type | Required |
74-
| ------------ | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
75-
| `theme` | Theme of the all toasts | `Theme` (default: `system`): `'light'`, `'dark'`, or `'system'` | - |
76-
| `maxToasts` | Maximum number of toasts to display | `number` | - |
77-
| `toastIcons` | Replace the default icons with custom icons | `Record<Variant, ReactNode>` | - |
78-
| `position` | Position of the toaster on the screen | `Position` (default: `bottom-right`): `'top-left'`, `'top-right'`, `'top-center'`, `'bottom-left'`, `'bottom-right'` or `'bottom-center'` | - |
79-
| `toastFont` | Font style for the all toasts | `string` | - |
39+
| Property | Description | Type | Required |
40+
| -------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------- |
41+
| `theme` | Theme of the all toasts | `Theme` (default: `system`): `'light'`, `'dark'`, or `'system'` | - |
42+
| `maxToasts` | Maximum number of toasts to display | `number` | - |
43+
| `toastIcons` | Replace the default icons with custom icons | `Record<Variant, ReactNode>` | - |
44+
| `position` | Position of the toaster on the screen | `Position` (default: `bottom-right`): `'top-left'`, `'top-right'`, `'top-center'`, `'bottom-left'`, `'bottom-right'` or `'bottom-center'` | - |
45+
| `toastOptions` | Options to customize all toasts. | [`ToastOptions`](/toastOptions) | - |

‎docs/src/docs.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@ export const SidebarRoutes: iDocsRoutes[] = [
8282
title: 'Dark Mode',
8383
path: '/dark-mode',
8484
},
85+
{
86+
title: 'Toast Options',
87+
path: '/options',
88+
},
8589
],
8690
},
8791
];

0 commit comments

Comments
 (0)