#Toasts

#Import

import { ToastManager, useToasts } from 'bumbag'

#Setup

To get started with rendering toasts to your app, you will need to put the <ToastManager /> component at the top level of your app.

The ToastManager component is essentially an overlay to render the toasts.

import { Provider, ToastManager } from 'bumbag';
const App = () => (
<Provider theme={theme}>
// ... your app
<ToastManager />
</Provider>
);

#Usage

To render a toast on your screen, invoke the add function with a title & message from the useToasts hook.

By default, the toast will appear for 5 seconds.

Editable example

#Types

#Success

Editable example

#Danger

Editable example

#Warning

Editable example

#Info

Editable example

#Placement

You can customise the placement of the toasts by using the placement prop on <ToastManager>.

placement is set to "top-end" by default.

import { ToastManager } from 'bumbag';
const App = () => (
<ToastManager placement="bottom" />
);

#Stacked toasts

By default, toasts in Bumbag are stacked, meaning that you can display multiple toasts at the one time. However, you have the ability to disable this using the isStacked prop on <ToastManager>.

import { ToastManager } from 'bumbag';
const App = () => (
<ToastManager isStacked={false} />
);

#Custom Toast props

You can override the Toast component props using the Toast.defaultProps theme variable. This variable accepts an object of the <Toast> props.

import { Provider } from 'bumbag';
const theme = {
Toast: {
defaultProps: {
accent: 'bottom',
hasIcon: false
}
}
}
const App = () => (
<Provider theme={theme}>
// ... your app
</Provider>
);

Or you can change it via the toast instance:

Editable example

#Dismiss timeout

By default, the toast timeout is 5 seconds (5000ms). You can change this via the Toast.timeout theme variable.

To disable the timeout, set timeout to 0.

import { Provider } from 'bumbag';
const theme = {
Toast: {
timeout: 2000
}
}
const App = () => (
<Provider theme={theme}>
// ... your app
</Provider>
);

Or you can change it via the toast instance:

Editable example

#Disable the countdown bar

import { Provider } from 'bumbag';
const theme = {
Toast: {
showCountdown: false
}
}
const App = () => (
<Provider theme={theme}>
// ... your app
</Provider>
);

Or you can change it via the toast instance:

Editable example

#Props

#ToastManager Props

fade boolean

isStacked boolean

slide boolean

spacing string

overlayProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 808 more ...;
  timingFunction?: string;
}

toastProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 795 more ...;
  iconProps?: Pick<...>;
}
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Toast Props

countdown number

Inherits Alert props

accent true | "top" | "bottom"

Placement of the accent (the side border).

accentSize string

Size of the accent (in px).

hasIcon boolean

Should the alert have an icon depending on its type?

isInline boolean

Is the alert inline, and has the title beside its content?

onClickClose (event: MouseEvent<any, MouseEvent>) => void

Function to invoke when the alert close button is pressed.

showCloseButton boolean

Whether or not to show the close button.

title string

The title of the alert.

type "success" | "danger" | "warning" | "info"

The type of the alert.

closeButtonProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 806 more ...;
  spinnerProps?: SpinnerProps;
}

The props to spread onto the close button.

closeButtonIconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

The props to spread onto the close button icon.

iconProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 787 more ...;
  label?: string;
}

The props to spread onto the alert icon.

Inherits Flex props
Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Theming

Toast.styles.base
Toast.Content.styles.base
Toast.Title.styles.base
Toast.Description.styles.base
Toast.IconWrapper.styles.base
Toast.CloseButton.styles.base
On this page
Copyright © 2021 Jake Moxey