DocSpace-buildtools/web/ASC.Web.Storybook/stories/toast/base/README.md

Toast

Usage

import { Toast, toastr } from 'asc-web-components';
import 'react-toastify/dist/ReactToastify.min.css'; // You can place it here, but recommended place this file in main file, which contains all css`s

Description

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

<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>

Properties

Props	Type	Required	Values	Default	Description
type	oneOf	✅	success, error, warning, info	-	Define color and icon of toast
data	JSX or string	-	-	-	Any components or data inside a toast
title	string	-	-	-	Title inside a toast
withCross	bool	-	true, false	false	If false: toast disappeared after clicking on any area of toast. If true: toast disappeared after clicking on close button
timeout	number	-	from 750ms, 0 for disabling	5000	Time (in milliseconds) for showing your toast. Setting in 0 let you to show toast constantly until clicking on it

Other Options

<Toast/>
    // Remove all toasts in your page programmatically
    <button onClick = {()=> { toastr.clear() }}>Clear</button>

Examples

<Toast>
    // Display a warning toast, with no title
    {toastr.warning('My name is Dan. I like my cat')}

    // Display a success toast, with a title
    {toastr.success('Have fun storming the castle!', 'Miracle Max Says')}

    // Display a error toast, with title and you should close it manually
    {toastr.error('I do not think that word means what you think it means.', 'Inconceivable!', false)}
</Toast>