How to create reusable chakra ui toast - reactjs

Question

I'm using chakra ui with my next js app.
On some event, I want to show a notification using chakra ui toast, after performing some action.
(For ex. on clicking sign in, I'll send request to backend, and will show success or error toast depending on the result)
And as this toast can only be invoked after click and not programatically, I've created a function to do so
import { useToast } from '#chakra-ui/react';
...
export default function SignInPage() {
const toast = useToast();
const resultToast = (status, title) => {
return toast({
position: "top",
title: title,
status: status,
duration: 3000,
isClosable: true,
});
const handleSubmit = (e) => {
// talking to backend / database
if(success) {
resultToast("success", "sign in successful");
}
else {
resultToast("error", "sign in failed");
}
}
// sign in form
};
}
This is working totally fine, but the thing is I want to use this on multiple pages, and want to make it reusable, but the issue is:
I can't make it a jsx component, as it returns only toast element and gets invoked only on click.
And I can't make it a normal function in separate file, as it uses useToast hook from chakra ui which can't be used in a function (Or maybe I'm wrong).
And also not able to export the resultToast function from one file, it shows "Modifiers can't appear here"
As I'm using chakra ui, so didn't want to install any other toast library. So is there any way to make this reusable or I'll have to use any external library or copy paste the function on all pages :D

Answer 1

I don't know if you ever figured this out, but I ran into the same problem today, and here's how I resolved it with Chakra-UI. Create a separate function and write the logic like this...
import { useToast } from "#chakra-ui/react";
export const CustomToast = () => {
const toast = useToast();
// types are: "success", "info", "warning", "error"
const addToast = (newRes) => {
toast({
description:newRes.message,
status: newRes.type,
position:"top-right",
isClosable: true,
duration: 5000,
variant: 'left-accent'
})
}
return { addToast };
}
Then import the addToast method anywhere in your application import { addToast } from "../path/to/file";, create an instance const { addToast } = CustomToast(); and use it by passing a destructured object to the addToast function addToast({message: "sign in successful", type: "success"})... I hope this helps someone else out here.

Answer 2

You can use react-universal-flash library to flash notification across nextjs pages .
Just add Flasher to _app.js
import { ChakraProvider} from "#chakra-ui/react";
import { Flasher } from "react-universal-flash";
import Message from "./Message";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Flasher>
<Message />
</Flasher>
<Component {...pageProps} />
</ChakraProvider>
);
}
Codesandbox sample of chakra-ui along with react-universal-flash is below
react-universal-flash + chakra-ui

Answer 3

here is my solution: I did make an object and used it:
const defaultToastProps = {
position: "top-right" as ToastPosition,
duration: 2000,
isClosable: true,
};
const submitHandler = () => {
Axios.post("/user/register", formData)
.then((res) => {
console.log(res);
toast({
title: "Account created.",
description: "We've created your account for you.",
status: "success",
...defaultToastProps,
});
nav("/login");
})
.catch((err) => {
if (err.response) {
console.log(err.response.data.message);
toast({
title: "Something went wrong.",
description: err.response.data.message,
status: "error",
...defaultToastProps,
});
} else {
console.log(err);
toast({
title: "Something went wrong.",
description: "server-error",
status: "error",
...defaultToastProps,
});
}
});
};