I'm attempting to show a Chakra-UI Toast programmatically using the Chakra-UI React.js ponent library and am struggling to get it to work. The Chakra-UI Toast documentation only shows how to show the toast based on a button click, but I'd like to display it programmatically - in a returned promise after an AJAX call is made. I'm not sure if it's feasible, but I'd like to have a showToast function I could call to show it.

I'm in the process of integrating Chakra-UI into a React.js web application and am fairly new to both React.js and Chakra-UI.

Update

Here is a CodeSandbox showing what I am trying to achieve: . I have a button in there that shows the toast when it's clicked, but I'd like to show it in the setTimeout where the TODO is located.

I'm attempting to show a Chakra-UI Toast programmatically using the Chakra-UI React.js ponent library and am struggling to get it to work. The Chakra-UI Toast documentation only shows how to show the toast based on a button click, but I'd like to display it programmatically - in a returned promise after an AJAX call is made. I'm not sure if it's feasible, but I'd like to have a showToast function I could call to show it.

I'm in the process of integrating Chakra-UI into a React.js web application and am fairly new to both React.js and Chakra-UI.

Update

Here is a CodeSandbox showing what I am trying to achieve: https://codesandbox.io/embed/upbeat-rhodes-9zkii. I have a button in there that shows the toast when it's clicked, but I'd like to show it in the setTimeout where the TODO is located.

• javascript
• reactjs

2 Answers 2

You can programmatically trigger the toast by using React's useEffect hook. The useEffect hook works well for any side effects, such as fetching data or DOM manipulations.

 const toast = useToast();

  useEffect(() => {
    // Show toast every 5 seconds.
    setInterval(() => {
      toast({
        title: "Current Time.",
        description: `Time ${new Date()}`,
        status: "success",
        duration: 5000,
        isClosable: true
      });
    }, 5000);
  }, []); // Passing in empty array so this will only get called on mount

For plete solution view code sandbox https://codesandbox.io/s/eloquent-knuth-bt5u8?fontsize=14

Heres my solution, just in case someone stumbles accross this thread:

import { useToast } from "@chakra-ui/react";
import { useState, useEffect } from "react";

export function useToastHook() {
  const [state, setState] = useState(undefined);
  const toast = useToast();

  useEffect(() => {
    if (state) {
      const { message, status } = state;

      toast({
        title: status,
        description: message,
        status: status,
        duration: 3000,
        position: "top",
        isClosable: true,
      });
    }
  }, [state, toast]);

  return [state, setState];
}

And to use is do this (you can also pass the the newToast to any function which isn't in a .jsx file):

import { useToastHook } from "../ponents/Toast";

const App = () => {
  const [state, newToast] = useToastHook();

  const someThingHappens = (message) => {
    newToast({ message: message, status: "error" });
  };

  return (
    <div>
    ......
   </div>
  );
};