The @remix-breeze/toast library allows you to easily create and manage flash toast notification messages in a Remix application using cookie-based session storage.
npm install @remix-breeze/toastIn a breeze-toast.server.ts file, create an instance using the createBreezeToast function.
You need to initialize the toast with cookie options, primarily a secret for the cookie session.
import { createBreezeToast } from "@remix-breeze/toast";
const breezeToast = createBreezeToast({
cookie: {
secret: "your-secret-key",
},
});
export default breezeToast;You can optionally provide a name for the cookie:
const toast = createBreezeToast({
cookie: {
name: "my-toast-cookie",
secret: "your-secret-key",
},
});After creating the instance and export it, you can import it and use it in your routes' loader functions and action functions.
import breezeToast from "./breeze-toast.server,ts";
export async function action({ params }: ActionFunctionArgs) {
try {
await deletePost(params.id);
const headers = await breezeToast.success("Post deleted successfully");
return redirect("/posts", { headers });
} catch (error) {
const headers = await breezeToast.error("An error occurred while deleting the post");
return redirect("/posts", { headers });
}
}In any page you want to show your notification, you can get the toast using the breezeToast.getData method, return in your loader response, then use the useLoaderData Remix hook to access the toast data, and show it in your UI.
You can also access it and render it once in your root route, and any page will be able to show the toast notification.
In your root route root.tsx file, import your breezeToast instance, get the data in a loader function and return it.
import breezeToast from "./breeze-toast.server";
async function loader({ request }: LoaderFunctionArgs) {
const { toastData, headers } = await breezeToast.getData(request);
return json({ toastData }, { headers });
}Then, in the same root route root.tsx file, access the loader data using useLoaderData in your component and render the toastData message in the UI.
export function App() {
const loaderData = useLoaderData<typeof loader>();
const toastData = loaderData.toastData;
return (
<html lang="en">
<head>...</head>
<body>
<div className="toast-notification">
<p>{toastData.type}</p>
<p>{toastData.message}</p>
</div>
<Outlet />
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}Feel free to style the toast message container as you wish base on the type. The type can be error, success, info, warning.
You can easily use it with a client side Toast Notification Library, like react-toastify.
Here is an example:
import React from "react";
import breezeToast from "./breeze-toast.server";
import { ToastContainer, toast } from "react-toastify";
async function loader({ request }: LoaderFunctionArgs) {
const { toastData, headers } = await breezeToast.getData(request);
return json({ toastData }, { headers });
}
export function App() {
const loaderData = useLoaderData<typeof loader>();
/* Using useEffect to show the toast notification */
React.useEffect(() => {
if (loaderData.toastData) {
const { type, message } = loaderData.toastData;
toast[type](message);
}
}, [loaderData.toastData]);
return (
<html lang="en" className={clsx(theme)}>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
{/* Render the toast container */}
<ToastContainer />
</body>
</html>
);
}Adds a flash toast object to the session storage with type success and the specified message, committing the session object to the storage and redirecting to the specified URL.
-
options:-
message:string- The message to display. -
to:string- The URL to redirect to after displaying the toast.
-
await breezeToast.successRedirect({
to: "/dashboard",
message: "This is a success message",
});Adds a flash toast object to the toast session with type error and the specified message, committing the session object to the storage and redirecting to the specified URL.
-
options:-
message:string- The message to display. -
to:string- The URL to redirect to after displaying the toast.
-
await breezeToast.errorRedirect({
to: "/dashboard",
message: "This is an error message",
});Adds a flash toast object to the toast session with type info and the specified message, committing the session object to the storage and redirecting to the specified URL.
-
options:-
message:string- The message to display. -
to:string- The URL to redirect to after displaying the toast.
-
await breezeToast.infoRedirect({
to: "/dashboard",
message: "This is an info message",
});Adds a flash toast object to the toast session with type warning and the specified message, committing the session object to the storage and redirecting to the specified URL.
-
options:-
message:string- The message to display. -
to:string- The URL to redirect to after displaying the toast.
-
await breezeToast.warningRedirect({
to: "/dashboard",
message: "This is a warning message",
});Adds a flash toast object to the toast session with type success and the specified message.
-
message:string- The message to display.
-
Promise<Headers>- The headers object with the "Set-Cookie" property.
export async function action({ params }: ActionFunctionArgs) {
await deletePost(params.id);
const headers = await breezeToast.success("Post deleted successfully");
return redirect("/posts", { headers });
}Adds a flash toast object to the toast session with type error and the specified message.
-
message:string- The message to display.
-
Promise<Headers>- The headers object with the "Set-Cookie" property.
export async function action({ params }: ActionFunctionArgs) {
try {
await deletePost(params.id);
const headers = await breezeToast.success("Post deleted successfully");
return redirect("/posts", { headers });
} catch (error) {
const headers = await breezeToast.error("An error occurred while deleting the post");
return redirect("/posts", { headers });
}
}Adds a flash toast object to the toast session with type info and the specified message.
-
message:string- The message to display.
-
Promise<Headers>- The headers object with the "Set-Cookie" property.
export async function action({ params }: ActionFunctionArgs) {
await deletePost(params.id);
const headers = await breezeToast.info("Some info message");
return redirect("/posts", { headers });
}Adds a flash toast object to the toast session with type warning and the specified message.
-
message:string- The message to display.
-
Promise<Headers>- The headers object with the "Set-Cookie" property.
export async function action({ params }: ActionFunctionArgs) {
await deletePost(params.id);
const headers = await breezeToast.warning("Some warning message");
return redirect("/posts", { headers });
}Get the toast session object. When you call this function, it will return the session object. It's your responsibility to extract the toast data from the session object and commit the session object back to the storage.
-
request:Request- The request object.
-
Promise<Session>- The session object.
async function loader({ request }: LoaderFunctionArgs) {
const session = await breezeToast.getToastSession(request);
const toastData = session.get("breeze_toast");
return json(
{ toastData },
{
headers: {
"Set-Cookie": await breezeToast.sessionStorage.commitSession(session),
},
}
);
}Get the toast data from the session storage and commit the session object back to the storage.
-
request:Request- The request object.
-
Promise<{toastData: {type: "success" | "error" | "info" | "warning"; message: string;}; headers: Headers}>- An object containing the toast data and the headers object.
async function loader({ request }: LoaderFunctionArgs) {
const { toastData, headers } = await breezeToast.getData(request);
return json({ toastData }, { headers });
}Get the toast and add additional data to the response object. This function is useful when you want to add additional data to the response object before sending it to the client.
-
request:Request- The request object. -
data:T- An object containing the additional data to add to the response object.
-
Promise<Response>- The response object with the "toastData" property and the additional data.
async function loader({ request }: LoaderFunctionArgs) {
return toast.getWithJson(request, { message: "Hello World" });
}The session storage object with methods getSession, commitSession, and destroySession. You'll rarely need to use this unless you want to manually manipulate the toast cookie session.