82 lines
2.0 KiB
Plaintext
82 lines
2.0 KiB
Plaintext
import { Story, ArgsTable, Canvas, Meta } from "@storybook/addon-docs/blocks";
|
|
import * as stories from "./toast.stories.js";
|
|
|
|
import Toast from "./";
|
|
|
|
<Meta
|
|
title="Components/Toast"
|
|
component={Toast}
|
|
parameters={{
|
|
source: {
|
|
code: stories.basic,
|
|
},
|
|
}}
|
|
argTypes={{
|
|
timeout: {
|
|
description: `Time (in milliseconds) for showing your toast. Setting in \`0\` let you to show toast constantly until clicking on it`,
|
|
},
|
|
data: { description: "Any components or data inside a toast" },
|
|
withCross: {
|
|
description: `If \`false\`: toast disappeared after clicking on any area of toast. If \`true\`: toast disappeared after clicking on close button`,
|
|
},
|
|
}}
|
|
/>
|
|
|
|
# Toast
|
|
|
|
Toast allow you to add notification to your page with ease.
|
|
|
|
`<Toast />` is container for your notification. Remember to render the `<Toast />` _once_ in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.
|
|
|
|
`toastr` is a function for showing notifications.
|
|
|
|
<Canvas>
|
|
<Story story={stories.basic} name="Default" />
|
|
</Canvas>
|
|
|
|
<ArgsTable story="Default" />
|
|
|
|
<Canvas>
|
|
<Story story={stories.all} name="All" />
|
|
</Canvas>
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import Toast from "@docspace/components/toast";
|
|
import toastr from "@docspace/components/toast/toastr";
|
|
```
|
|
|
|
```jsx
|
|
<Toast />
|
|
<button onClick={() => toastr.success('Some text for toast', 'Some text for title', true)}>Click</button>
|
|
```
|
|
|
|
or
|
|
|
|
```jsx
|
|
<Toast>{toastr.success("Some text for toast")}</Toast>
|
|
```
|
|
|
|
You can use simple html tags. For this action you should wrap your message by empty tags:
|
|
|
|
```jsx
|
|
<Toast />
|
|
<button onClick={() => toastr.success(<>You have <b>bold text</b></>)}>Click</button>
|
|
```
|
|
|
|
If your notification include only text in html tags or data in JSX tags, you can omit empty tags:
|
|
|
|
```jsx
|
|
<Toast />
|
|
<button onClick={() => toastr.success(<b>Bold text</b>)}>Click</button>
|
|
```
|
|
|
|
#### Other Options
|
|
|
|
```js
|
|
<Toast/>
|
|
// Remove all toasts in your page programmatically
|
|
<button onClick = {()=> { toastr.clear() }}>Clear</button>
|
|
```
|