182 lines
5.0 KiB
Plaintext
182 lines
5.0 KiB
Plaintext
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs"
|
|
import { Story } from "@/components/Story";
|
|
import { LoadedCode, GITHUB } from "@/components/LoadedCode";
|
|
import { ToastDemo } from "./ToastBlocks/Preview";
|
|
import Examples from "./ToastBlocks/Examples";
|
|
|
|
# Toast
|
|
A brief message alert to inform users about events or actions.
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<ToastDemo />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
## Installation
|
|
|
|
1. Create a new file `Toast.tsx` in your component folder.
|
|
2. Copy and paste the following code into the file.
|
|
|
|
<LoadedCode from={`${GITHUB}/packages/react/components/Toast.tsx`} />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Toaster } from "@components/Toast";
|
|
```
|
|
|
|
```html
|
|
<Toaster />
|
|
```
|
|
|
|
> Note:
|
|
>
|
|
> You can put Toaster in anywhere. It will automatically go to document.body through portal.
|
|
> But, it is recommended to place it at the root of the application, just once.
|
|
|
|
---
|
|
|
|
```tsx
|
|
import { useToast } from "@components/Toast";
|
|
|
|
function App() {
|
|
const { toast } = useToast();
|
|
return <button onClick={() => toast("Hello, world!")}>Toast</button>;
|
|
}
|
|
```
|
|
|
|
## Props
|
|
|
|
### Toaster
|
|
|
|
#### Special
|
|
|
|
| Prop | Type | Default | Description |
|
|
|:----------------|:-----------------------|:---------------------|:--------------------------|
|
|
| `defaultOption` | `Partial<ToastOption>` | `defaultToastOption` | Global options for toast. |
|
|
|
|
```ts
|
|
interface ToastOption {
|
|
closeButton: boolean;
|
|
closeTimeout: number | null;
|
|
}
|
|
|
|
const defaultToastOption: ToastOption = {
|
|
closeButton: true,
|
|
closeTimeout: 3000,
|
|
};
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Normal
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Normal />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Success
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Success />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Error
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Error />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Warning
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.Warning />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Pending - Fail
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.PendingFail />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Pending - Success
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.PendingSuccess />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={`${GITHUB}/packages/react/src/docs/components/ToastBlocks/Preview.tsx`} />
|
|
</TabContent>
|
|
</TabProvider> |