.. | ||
svg | ||
index.js | ||
README.md | ||
styled-toast.js | ||
styled-toastr.js | ||
toast.stories.js | ||
toast.stories.mdx | ||
toast.test.js | ||
toastr.js |
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.
Usage
import Toast from "@appserver/components/toast";
import toastr from "@appserver/components/toast/toastr";
<Toast />
<button onClick={() => toastr.success('Some text for toast', 'Some text for title', true)}>Click</button>
or
<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:
<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:
<Toast />
<button onClick={() => toastr.success(<b>Bold text</b>)}>Click</button>
Other Options
<Toast/>
// Remove all toasts in your page programmatically
<button onClick = {()=> { toastr.clear() }}>Clear</button>
Properties
Props | Type | Required | Values | Default | Description |
---|---|---|---|---|---|
className |
string |
- | - | - | Accepts class |
data |
element ,string |
- | - | - | Any components or data inside a toast |
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 |
title |
string |
- | - | - | Title inside a toast |
type |
oneOf |
✅ | success , error , warning , info |
- | Define color and icon of toast |
withCross |
bool |
- | - | false |
If false : toast disappeared after clicking on any area of toast. If true : toast disappeared after clicking on close button |