2019-07-17 11:20:02 +00:00
# Toast
2019-11-21 13:33:32 +00:00
Toast allow you to add notification to your page with ease.
2019-07-17 11:20:02 +00:00
2019-11-21 13:33:32 +00:00
`<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.
2019-07-17 11:20:02 +00:00
`toastr` is a function for showing notifications.
2019-11-21 13:33:32 +00:00
### Usage
2019-07-17 11:20:02 +00:00
```js
2021-02-25 21:19:45 +00:00
import Toast from "@appserver/components/toast";
import toastr from "@appserver/components/toast/toastr";
2019-11-21 13:33:32 +00:00
```
```jsx
2019-07-17 11:20:02 +00:00
< Toast / >
< button onClick = {() = > toastr.success('Some text for toast', 'Some text for title', true)}>Click< / button >
```
2019-11-21 13:33:32 +00:00
or
2019-07-17 11:20:02 +00:00
2019-11-21 13:33:32 +00:00
```jsx
< Toast > {toastr.success("Some text for toast")}< / Toast >
2019-07-17 11:20:02 +00:00
```
2019-11-21 13:33:32 +00:00
2019-09-02 08:58:07 +00:00
You can use simple html tags. For this action you should wrap your message by empty tags:
2019-11-21 13:33:32 +00:00
```jsx
2019-09-02 08:58:07 +00:00
< Toast / >
< button onClick = {() = > toastr.success(< >You have < b > bold text< / b > < />)}>Click< / button >
```
2019-07-17 11:20:02 +00:00
2019-09-02 08:58:07 +00:00
If your notification include only text in html tags or data in JSX tags, you can omit empty tags:
2019-11-21 13:33:32 +00:00
```jsx
2019-09-02 08:58:07 +00:00
< Toast / >
< button onClick = {() = > toastr.success(< b > Bold text< / b > )}>Click< / button >
```
2019-07-17 11:20:02 +00:00
#### Other Options
2019-11-21 13:33:32 +00:00
2019-07-17 11:20:02 +00:00
```js
< Toast / >
// Remove all toasts in your page programmatically
2019-11-21 13:33:32 +00:00
< button onClick = {()= > { toastr.clear() }}>Clear< / button >
2019-07-17 11:20:02 +00:00
```
2019-11-21 13:33:32 +00:00
### Properties
2019-07-17 11:20:02 +00:00
2019-11-21 13:33:32 +00:00
| Props | Type | Required | Values | Default | Description |
| ----------- | :----------------: | :------: | :-----------------------------------: | :-----: | ------------------------------------------------------------------------------------------------------------------------------ |
2019-12-03 13:42:14 +00:00
| `className` | `string` | - | - | - | Accepts class |
2019-11-21 13:33:32 +00:00
| `data` | `element` ,`string` | - | - | - | Any components or data inside a toast |
2019-12-03 13:42:14 +00:00
| `id` | `string` | - | - | - | Accepts id |
| `style` | `obj` , `array` | - | - | - | Accepts css style |
| `timeout` | `number` | - | `from 750ms` , `0 - disabling` | `5000` | Time (in milliseconds) for showing your toast. Setting in `0` let you to show toast constantly until clicking on it |
2019-11-21 13:33:32 +00:00
| `title` | `string` | - | - | - | Title inside a toast |
2019-12-03 13:42:14 +00:00
| `type` | `oneOf` | ✅ | `success` , `error` , `warning` , `info` | - | Define color and icon of toast |
2019-11-21 13:33:32 +00:00
| `withCross` | `bool` | - | - | `false` | If `false` : toast disappeared after clicking on any area of toast. If `true` : toast disappeared after clicking on close button |