createToast

function

createToast(props?): ToastWidget

Create an ToastWidget with given config props

Parameters

• props?: PropsConfig<ToastProps>

Returns

ToastWidget

an ToastWidget

getToastDefaultConfig

function

getToastDefaultConfig(): ToastProps

Retrieve a shallow copy of the default Toast config

Returns

ToastProps

the default Toast config

Toast

function

Toast(props): ReactNode

Toast component that uses a forward ref to expose the Toast API.

This component utilizes the useWidgetWithConfig hook to create a toast widget with the provided properties and configuration. It also uses useImperativeHandle to expose the widget's API through the forwarded ref.

Parameters

• props: Partial<ToastProps> & RefAttributes<ToastApi>

Partial properties of ToastProps to configure the toast widget.

Returns

ReactNode

A JSX element that conditionally renders the ToastElement based on the widget's state.

ToastApi

interface

Represents the API for the toast component.

Methods
close

close(): void

Triggers alert closing programmatically (same as clicking on the close button (×)).

Returns

void

open

open(): void

Triggers the alert to be displayed for the user.

Returns

void

ToastContext

interface

Represents the context for a Toast widget. This interface is an alias for WidgetSlotContext<ToastWidget>.

Properties
api

api: ToastApi

all the api functions to interact with the widget

directives

directives: ToastDirectives

directives to be used on html elements in the template of the widget or in the slots

state

state: ToastState

the state of the widget

ToastDefaultSlotStructure

function

ToastDefaultSlotStructure(slotContext): Element

Renders the default slot structure for a Toast component.

Parameters

• slotContext: ToastContext

The context containing the state and properties for the Toast component.

Returns

Element

The JSX element representing the default slot structure of the Toast.

ToastDirectives

interface

Interface representing the directives for a toast component.

Properties
autoHideDirective

autoHideDirective: Directive

Directive that handles the autohide of the toast component

bodyDirective

bodyDirective: Directive

Directive that adds all the necessary attributes to the body

closeButtonDirective

closeButtonDirective: Directive

Directive that adds all the necessary attributes to the close button depending on the presence of the header

transitionDirective

transitionDirective: Directive

the transition directive, piloting what is the visual effect of going from hidden to visible

ToastProps

interface

Interface representing the properties for the Toast component.

Properties
animated

animated: boolean

If true, alert closing will be animated.

Animation is triggered when clicked on the close button (×), via the .close() function or the visible prop is changed

Default Value

true

animatedOnInit

animatedOnInit: boolean

If true, alert opening will be animated.

Animation is triggered when the .open() function is called or the visible prop is changed

Default Value

false

ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'

autoHide

autoHide: boolean

If true automatically hides the toast after the delay.

Default Value

true

children

children: SlotContent<ToastContext>

Template for the toast content

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

delay

delay: number

Delay in milliseconds before hiding the toast.

Default Value

5000

dismissible

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

Default Value

true

header

header: SlotContent<ToastContext>

Header template for the toast component

onHidden

onHidden: () => void

Callback called when the alert is hidden.

Returns

void

Default Value
() => {}
onShown

onShown: () => void

Callback called when the alert is shown.

Returns

void

Default Value
() => {}
onVisibleChange

onVisibleChange: (visible) => void

Callback called when the alert visibility changed.

Parameters

• visible: boolean

Returns

void

Default Value
() => {}
structure

structure: SlotContent<ToastContext>

Global template for the toast component

transition

transition: TransitionFn

The transition function will be executed when the alert is displayed or hidden.

Depending on the value of animatedOnInit, the animation can be optionally skipped during the showing process.

Default Value

fadeTransition

visible

visible: boolean

If true the alert is visible to the user

Default Value

true

ToastState

interface

Represents the state of a Toast component.

Properties
ariaCloseButtonLabel

ariaCloseButtonLabel: string

Accessibility close button label

Default Value

'Close'

autoHide

autoHide: boolean

If true automatically hides the toast after the delay.

Default Value

true

children

children: SlotContent<ToastContext>

Template for the toast content

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

delay

delay: number

Delay in milliseconds before hiding the toast.

Default Value

5000

dismissible

dismissible: boolean

If true, alert can be dismissed by the user. The close button (×) will be displayed and you can be notified of the event with the (close) output.

Default Value

true

header

header: SlotContent<ToastContext>

Header template for the toast component

hidden

hidden: boolean

Is true when the alert is hidden. Compared to visible, this is updated after the transition is executed.

structure

structure: SlotContent<ToastContext>

Global template for the toast component

visible

visible: boolean

If true the alert is visible to the user

Default Value

true

ToastWidget

type alias

ToastWidget: Widget<ToastProps, ToastState, ToastApi, ToastDirectives>

Represents a Toast widget component.