#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 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:

#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;
  ... 800 more ...;
  timingFunction?: string;
}

toastProps

{
  unstable_system?: any;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 787 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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

disabled boolean

overrides

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

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

themeKey string

#Toast Props

countdown number

Inherits Alert props

accent true | "bottom" | "top"

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;
  defaultChecked?: boolean;
  defaultValue?: string | number | string[];
  suppressContentEditableWarning?: boolean;
  suppressHydrationWarning?: boolean;
  accessKey?: string;
  ... 797 more ...;
  spinnerProps?: SpinnerProps;
}

The props to spread onto the close button.

closeButtonIconProps

{
  children?: string | number | boolean | {
     | (string & {
      ) | (number & {
        ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
        ......

The props to spread onto the close button icon.

iconProps

{
  children?: string | number | boolean | {
     | (string & {
      ) | (number & {
        ) | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 45 more ... | (ReactPortal & ((props: BoxProps) => ReactNode));
        ......

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 "left" | "right" | "center"

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

altitude string

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 94 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
Copyright © 2020 Jake Moxey