Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

Latest commit

聽

History

History
627 lines (448 loc) 路 16.4 KB

toast.mdx

File metadata and controls

627 lines (448 loc) 路 16.4 KB
Raw

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.

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.add({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Types

Success

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.success({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Danger

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.danger({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Warning

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.warning({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

Info

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({
          title: 'Did you know?',
          message: 'Bumbag is a UI Kit for React'
        })
      }
    >
      Add toast
    </Button>
  )
}

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:

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ accent: 'bottom', hasIcon: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

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:

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ timeout: 2000, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

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:

function Example() {
  const toasts = useToasts();

  return (
    <Button
      onClick={() =>
        toasts.info({ showCountdown: false, title: 'Did you know?', message: 'Bumbag is a UI Kit for React' })
      }
    >
      Add toast
    </Button>
  )
}

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

toastProps

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

use

{`string | (ComponentClass & { useProps: any; }) | (FunctionComponent & { useProps: any; })`}

className string

children

{`string | number | boolean | {} | ReactElement ReactElement Component)>) | (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; ... 96 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?: any; right?: any; bottom?: any; left?: any; defaultChecked?: boolean; defaultValue?: string | number | string[]; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; ... 673 more ...; ignoreGrayOverride?: boolean; }`}

The props to spread onto the close button.

closeButtonIconProps

{`{ unstable_system?: any; top?: any; right?: any; bottom?: any; left?: any; children?: string | number | boolean | { | ReactElement ReactElement Component)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}

The props to spread onto the close button icon.

iconProps

{`{ unstable_system?: any; top?: any; right?: any; bottom?: any; left?: any; children?: string | number | boolean | { | ReactElement ReactElement Component)>) | (new (props: any) => Component<...>)> | ... 47 more ... | (ReactPortal...`}

The props to spread onto the alert icon.

Inherits Flex props
Inherits Box props

use

{`string | (ComponentClass & { useProps: any; }) | (FunctionComponent & { useProps: any; })`}

className string

children

{`string | number | boolean | {} | ReactElement ReactElement Component)>) | (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; ... 96 more ...; Template?: TemplateThemeConfig; }`}

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

themeKey string

Theming

<Theme component={'Toast'} title="Did you know?" overrides={['Toast.styles.base', 'Toast.Content.styles.base', 'Toast.Title.styles.base', 'Toast.Description.styles.base', 'Toast.IconWrapper.styles.base', 'Toast.CloseButton.styles.base']}> Bumbag is a React UI Kit.