Toast Components

Notification components.

Toaster

# Toaster API

Name	Type	Default Value
className	string
user classes for the main HTML tag
innerRef	(Function \| string \| object)
ref to the main tag
position	(static \| top-right \| top-left \| top-center \| top-full \| bottom-right \| bottom-left \| bottom-center \| bottom-full)	top-right
determines position of the element, set position to 'static' to avoid fixed positioning. Options with 'full' suffix will give toast 100% width. Available values: 'static', 'top-end', 'top-center', 'top-left', 'top-full', 'bottom-right', 'bottom-center', 'bottom-left', 'bottom-full'

Toast

Usage

Example

This is a toast in static positioned toaster number 1.

This is a toast in static positioned toaster number 2.

This is a toast in top-right positioned toaster number 1.

Script


  let toasts = [
    { position: 'static'},
    { position: 'static'},
    { position: 'top-right', autohide: 3000 }
  ];
  let toasters = (()=>{
    return toasts.reduce((toasters, toast) => {
      toasters[toast.position] = toasters[toast.position] || []
      toasters[toast.position].push(toast)
      return toasters
    }, {})
  })();

  return (
    <>
      {Object.keys(toasters).map((toasterKey) => (
        <CToaster
          position={toasterKey}
          key={'toaster' + toasterKey}
        >
          {
          toasters[toasterKey].map((toast, key)=>{
            return(
              <CToast
                key={'toast' + key}
                show={true}
                autohide={toast.autohide}
                fade={toast.fade}
              >
                <CToastHeader closeButton={toast.closeButton}>
                  Toast title
                </CToastHeader>
                <CToastBody>
                  {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
                </CToastBody>
              </CToast>
            )
          })
          }
        </CToaster>
      ))}
    </>
  )

# Toast API

Name	Type	Default Value
className	string
user classes for the main HTML tag
children	any
children components
innerRef	(Function \| string \| object)
ref to the main tag
show	boolean
show state
autohide	(number \| boolean)
autohide feature on (true or time)
fade	boolean	true
use fade effect
onStateChange	Function
on state change callback

ToastHeader

# ToastHeader API

Name	Type	Default Value
className	string
user classes for the main HTML tag
children	any
children components
innerRef	(Function \| string \| object)
ref to the main tag
closeButton	boolean	true
ref to the main tag

ToastBody

# ToastBody API

Name	Required	Type	Default Value
className		string
user classes for the main HTML tag
innerRef		(Function \| string \| object)
ref to the main tag