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.
Types#
Success#
Danger#
Warning#
Info#
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:
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
to0
.
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:
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:
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 }; ... 807 more ...; ignoreGrayOverride?: boolean; }
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