Toast

The Toast component is a highly customizable notification component that displays messages, icons, and actions. It consists of the main Toast component and its subcomponents, ToastAction, ToastContainer, and ToastIcon.

Importing

import { Toast } from '@ef-global/backpack/Toast';

Props

Toast

Prop	Type	Default	Description
triggerOpen	boolean	false	If true, the toast will be open on render.
title	string	-	The title of the toast.
description	string	-	The description text of the toast.
duration	number	5000	The duration (in milliseconds) for which the toast will be displayed. Set to Infinity for it to be persistent.
children	Array<ReactElement<typeof ToastIcon> \| ReactElement<typeof ToastAction>> \| ReactElement<typeof ToastIcon> \| ReactElement<typeof ToastAction>	-	The content to be displayed inside the toast, including ToastIcon and ToastAction components.

ToastAction

Prop	Type	Default	Description
children	ReactElement<typeof Link>	-	The content to be displayed inside the ToastAction, usually a Link component.

ToastContainer

Prop	Type	Default	Description
children	Array<ReactElement<typeof Toast>> \| ReactElement<typeof Toast>	-	The Toast components to be displayed inside the ToastContainer.

ToastIcon

Prop	Type	Default	Description
children	React.ReactNode	-	The content to be displayed as an icon inside the ToastIcon.

Usage

First, wrap the Toast components inside a ToastContainer.

<ToastContainer>
  <Toast
    key={1}
    open={open}
    title="Title"
    description="Descriptive text"
    onOpenChange={setOpen}
  >
    <ToastIcon>
      <IconInfoCircleOutlined />
    </ToastIcon>
    <ToastAction>
      <Link href='#'>Action</Link>
    </ToastAction>
  </Toast>
</ToastContainer>

You can use the Toast component with its subcomponents to create a custom toast with an icon and an action.

Examples

Default Toast

<Button as='button' onPress={() => setOpen(!open)}>
  Show Toast
</Button>
<ToastContainer>
  <Toast
    key={1}
    open={open}
    title="Title"
    description="Descriptive text"
    onOpenChange={setOpen}
  >
    <ToastIcon>
      <IconInfoCircleOutlined />
    </ToastIcon>
    <ToastAction>
      <Link href='#'>Action</Link>
    </ToastAction>
  </Toast>
</ToastContainer>

Infinite Duration Toast

<Button as='button' onPress={() => setOpen(!open)}>
  Show Toast
</Button>
<ToastContainer>
  <Toast
    key={1}
    open={open}
    title="Title"
    description="Descriptive text"
    duration={Infinity}
    onOpenChange={setOpen}
  >
      <ToastIcon>
          <IconInfoCircleOutlined />
      </ToastIcon>
      <ToastAction>
          <Link href='#'>Action</Link>
      </ToastAction>
  </Toast>
</ToastContainer>

Multiple Toasts

<Button as='button' onPress={() => setCount(count + 1)}>
  Show Toast
</Button>
<ToastContainer>
  {[...Array(count)].map((_, index) => {
    return (
      <Toast key={index} title='Title' description='Descriptive text'>
        <ToastIcon>
          <IconInfoCircleOutlined />
        </ToastIcon>
        <ToastAction>
          <Link href='#'>Action</Link>
        </ToastAction>
      </Toast>
    );
  })}
</ToastContainer>

Text Video