ToastMessage.Provider wraps a ToastMessage, providing the ability to programatically show and hide the ToastMessage.

mount <ToastMessage.Provider />

<ToastMessage.Provider ref={node => (window.toastProvider = node)} />

Previews

Preview each ToastMessage and see how to call it.

addMessage.processing

Calls a processing ToastMessage.

Preview
<>
  <ToastMessage.Provider ref={node => (window.toastProvider = node)} />
  <Button
    mb={3}
    onClick={e =>
      window.toastProvider.addMessage("Processing payment...", {
        secondaryMessage: "Check progress on Etherscan",
        actionHref:
          "https://etherscan.io/tx/0xcbc921418c360b03b96585ae16f906cbd48c8d6c2cc7b82c6db430390a9fcfed",
        actionText: "Check",
        variant: "processing"
      })
    }
  >
    Preview
  </Button>
</>
<>
  <ToastMessage.Provider ref={node => (window.toastProvider = node)} />
  <Button
    mb={3}
    onClick={e =>
      window.toastProvider.addMessage("Processing payment...", {
        secondaryMessage: "Check progress on Etherscan",
        actionHref:
          "https://etherscan.io/tx/0xcbc921418c360b03b96585ae16f906cbd48c8d6c2cc7b82c6db430390a9fcfed",
        actionText: "Check",
        variant: "processing"
      })
    }
  >
    Preview
  </Button>
</>
Copy code