Remix Toast

To enable toast functionality globally using middleware mode, add the following to your root.tsx. This approach uses context to manage toasts via getToast and setToast and requires exporting the toastMiddleware.

import { getToast, setToast, toastMiddleware } from "remix-toast/middleware";

export const loader = async ({ request, context }: Route.LoaderArgs) => {
  // Extracts the toast from the request
  const toast = getToast(context);
  // pass it to the client side
  return { toast }
}

export const action = async ({ request, context }: Route.ActionArgs) => {
  setToast(context, { message: "hello toast!", type: "success" });
  return null
}

export default function App({ loaderData }: Route.ComponentProps) {
  const { toast } = loaderData

  useEffect(() => {
   if(toast){
    // Call your toast function here
    alert(toast.message);
   }
  }, [toast])

  return (
    ...
  );
}

// Export the middleware to be used in the app
export const middleware = [toastMiddleware()];

To use sonner for client-side rendering, include the Toaster component in your app and use a useEffect hook to call notify.error() or notify.success() based on the toast.type provided by the server.

import { data, type LinksFunction, type LoaderFunctionArgs } from "react-router";
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
import { useEffect } from "react";
import { getToast } from "remix-toast";
import { Toaster, toast as notify } from "sonner";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { toast, headers } = await getToast(request);
  return data({ toast }, { headers });
};

export default function App() {
  const { toast } = useLoaderData<typeof loader>();
  // Hook to show the toasts
  useEffect(() => {
    if (toast?.type === "error") {
      notify.error(toast.message);
    }
    if (toast?.type === "success") {
      notify.success(toast.message);
    }
  }, [toast]);

  return (
    <html lang="en">
      <head>...</head>
      <body
        >
        ...
        <Toaster />
      </body>
    </html>
  );
}

To use react-toastify for client-side rendering, import the toast styles in your links function, include the ToastContainer in your component tree, and trigger notifications inside a useEffect hook using the toast object from your loader data.

import { data, type LinksFunction, type LoaderFunctionArgs } from "react-router";
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "react-router";
import { useEffect } from "react";
import { getToast } from "remix-toast";
import { ToastContainer, toast as notify } from "react-toastify";
import toastStyles from "react-toastify/ReactToastify.css?url";

// Add the toast stylesheet
export const links: LinksFunction = () => [{ rel: "stylesheet", href: toastStyles }];

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { toast, headers } = await getToast(request);
  return data({ toast }, { headers });
};

export default function App() {
  const { toast } = useLoaderData<typeof loader>();
  // Hook to show the toasts
  useEffect(() => {
    if (toast) {
      // notify on a toast message
      notify(toast.message, { type: toast.type });
    }
  }, [toast]);

  return (
    <html lang="en">
      <head>...</head>
      <body
        >
        ...
        {/* Add the toast container */}
        <ToastContainer />
      </body>
    </html>
  );
}

Use the replaceWith... utilities to replace the current entry in the browser's history stack and show a toast message. This is useful for redirects where you don't want the user to be able to click 'back' to the previous state.

Available utilities:

• replaceWithToast(path, options): General purpose replace with custom toast configuration.
• replaceWithSuccess(path, messageOrOptions): Replaces history and shows a success toast.
• replaceWithError(path, messageOrOptions): Replaces history and shows an error toast.
• replaceWithInfo(path, messageOrOptions): Replaces history and shows an info toast.
• replaceWithWarning(path, messageOrOptions): Replaces history and shows a warning toast.

import { replaceWithToast } from "remix-toast";

export const action = () => {
  return replaceWithToast("/login", {
    message: "You need to login to access this page",
    description: "description of toast",
    type: "error",
  });
};