Toast

A toast notification that gives non-intrusive feedback to the user and times out automatically.

It uses the react-hot-toast package, but only through the `useToaster` hook to manage the states, the rendering is done by our own components.

Toast has 2 exports, the ToastProvider component which is the container for all the notifications and the toast function that allows triggering the notification. It sets all the default behaviour, like pausing on hover and positioning and styles the different types of notification (blank (default), error and success).

This is the preferred user feedback way as it is not intrusive and it simply provides some state information to the user without waiting for feedback, ie: the information was saved. When feedback is required consider using the AlertDialog component.

<ToastProvider>
  <Button onClick={() => toast.success('This is the toast message')}>
    Click for toast
  </Button>
</ToastProvider>

This component can render a string message by default. However, it can be overriden to show more complex component structure Render more than a string. For more information on other configuration options and props, please read about the underlying behaviour at react-hot-toast.

We can create a custom toast UI by passing in a component to the toast function. The Toast component used by the ToastProvider is exported for easy reuse.

<ToastProvider>
     <Button
        onClick={() => toast(
          <Toast>
            <Toast.Icon is={Info} />
            <Text>This is my custom toast</Text>
            <Toast.Close onDismiss={() => alert('Toast has been dismissed.')} />
          </Toast>
        )
      }
      >
        Click for custom toast
      </Button>
    </ToastProvider>