Toast not working properly #13
Description
Hi I followed the initial steps to get the toast going with sonner see below, but it is not working.
Expected behaviour:
Toast to work when being called.
What is happening:
Toast gets called on refresh twice, and doesn't get cleared, if I refresh it continues to get called.
Is something else missing?
from route
// ... imports
export const action = async ({ request }: ActionFunctionArgs) => {
return jsonWithError(null, 'There are errors in the form')
}
from root
// ... imports
export const loader = async ({ request }: LoaderFunctionArgs) => {
// ... otherHeaders logic
const { toast, headers: toastHeaders } = await getToast(request)
return json(
{
toast
},
{
headers: {
// ...otherHeaders,
...toastHeaders
}
}
)
}
export default function Home() {
const { toast: serverToast } = useLoaderData<typeof loader>()
useEffect(() => {
console.log('serverToast', serverToast)
if (serverToast?.type === 'success') {
toast.success(serverToast.message)
}
if (serverToast?.type === 'error') {
toast.error(serverToast.message)
}
}, [serverToast])
return (
<html lang="en">
<head>
<Meta />
<title>Basic Example With Remix Toast</title>
<Links />
</head>
<body>
{children}
<Toaster />
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}
using
devDeps
@remix-run/dev -> 2.8.1
@remix-run/eslint-config -> 2.8.1
deps
@remix-run/serve -> 2.8.1
@remix-run/react -> 2.8.1
@remix-run/node -> 2.8.1
sonner -> 1.4.0
Edit: Just wanted to say congrats with the lib though, fantastic explanation on the blog.