React Design System: component Toaster

Toaster

A toast is a lightweight, ephemeral notice from an application in direct response to a user's action.

Overview

API

Code

Component 'Toaster'

First, you need to import a component to your code (сheck component path is right):

import Toaster from "../../core/Toaster";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

Way to use the Toaster component is <Toaster ref={ref => ref.show({ ...toast })}/>
Render a Toaster element and use the ref prop to access its instance methods.Working with multiple toasters.
Toast is an array and has his own API.
Toast API description:

message

string

Message to display in the body of the toast. Required.

icon

string | element

Name of a Blueprint UI icon (or an icon element) to render before the message.

action

element

Action rendered as a Button. The toast is dismissed automatically when the user clicks the action button. Omit this prop to omit the action button. Options: href target text . For example, { href: 'https://gum.co/figma2react', target: '_blank', text: <strong>Yum.</strong> }.

timeout

number = 5000

Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout (this is discouraged).

onDismiss

func

Callback invoked when the toast is dismissed, either by the user or by the timeout. The value of the argument indicates whether the toast was closed because the timeout expired.

type

string = def

This prop set the shape of the component. Possible states: def . The default state is def.

view

string = filled

This prop set the view of the component. Possible states: filled | smooth | outlined | raised . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

withoutClose

boolean

To show or not Close button.

position

string = top

Position of Toaster within its container. Possible states: top top-left top-right bottom bottom-left bottom-right

usePortal

boolean = true

Whether the toaster should be rendered into a new element attached to document.body. If false, then positioning will be relative to the parent element.

maxToasts

undefined | number = undefined

The maximum number of active toasts that can be displayed at once. When the limit is about to be exceeded, the oldest active toast is removed.