Remix Toast

GitHub Repo stars npm GitHub npm npm GitHub top language

用于 React router v7 / Remix.run 的简单服务器端 toast 管理库！

这个库为你提供了向用户显示 toast 通知可能需要的所有基本工具。客户端实现完全取决于你，你可以使用任何你想要显示 toast 的库。

服务器函数使用 @remix-run/server-runtime 原语创建一个 cookie 会话，因此这个库与服务器无关，应该可以与任何服务器设置一起使用。

如果你想深入了解其工作原理，你可以在这里找到：https://alemtuzlak.hashnode.dev/handling-toasts-in-remix

安装

npm install remix-toast

Remix.run

如果你正在使用 Remix.run，你可以使用此库的 v1.2.2 或更低版本。v2 及更高版本仅与 react-router v7 兼容。

react-router v7 迁移指南

如果你正在使用 react-router v7，你可以使用此库的 v2.0.0 版本。你唯一需要更改的是将所有 json 方法重命名为 data 方法，redirect 方法保持不变。例如

- import { jsonWithSuccess } from "remix-toast";
+ import { dataWithSuccess } from "remix-toast";

export const action = () => { 
- return jsonWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
+ return dataWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
};

设置

服务器端

为了能够在应用程序的任何位置显示 toast，你需要将以下代码添加到你的 root.tsx 文件中。

import { getToast } from "remix-toast";

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // Extracts the toast from the request
  const { toast, headers } = await getToast(request);
  // Important to pass in the headers so the toast is cleared properly
  return data({ toast }, { headers });
}

export default function App({ children }: { children: ReactNode }) {
  const { toast } = useLoaderData<typeof loader>();
  
  useEffect(() => {
   if(toast){
    // Call your toast function here
    alert(toast.message);
   }
  }, [toast])

  return (
    ...
  );
}

客户端

在此之后，你可以使用任何你喜欢的 toast 通知库，这里有一些示例

react-toastify

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 }];
// Implemented from above
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>
  );
}

react-toastify

Sonner

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";

// Implemented from above
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>
        ...
        {/* Add the toast container */}
        <Toaster />
      </body>
    </html>
  );
}

react-toastify

你可以通过 setToastCookieOptions 函数传入你自己的选项来覆盖默认的 cookie 选项。

import { setToastCookieOptions } from "remix-toast";

setToastCookieOptions({ 
  secrets:
    process.env.NODE_ENV === "production"
      ? [process.env.SESSION_SECRET]
      : ["secret"]
});

使用自定义会话创建实用函数

createToastUtilsWithCustomSession 是一个函数，允许你为你的 toast 创建自定义会话。如果你想为你的应用程序的不同部分设置不同类型的 toast，这将很有用。

import { createCookieSessionStorage } from "react-router";
import { createToastUtilsWithCustomSession } from "remix-toast";

const session = createCookieSessionStorage({
  cookie: {
    name: "your-custom-session",
    secrets: ["some-secret"],
  },
});

export const {
  getToast,
  redirectWithToast, 
  redirectWithSuccess, 
  redirectWithError, 
  redirectWithInfo, 
  redirectWithWarning, 
  dataWithSuccess, 
  dataWithError, 
  dataWithInfo, 
  dataWithWarning 
} = createToastUtilsWithCustomSession(session);

实用工具

redirectWithToast

允许你重定向到新路由并显示 toast 消息的通用函数。

import { redirectWithToast } from "remix-toast";

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

redirectWithSuccess

重定向到新路由并显示成功 toast 消息。

import { redirectWithSuccess } from "remix-toast";

export const action = () => {
  return redirectWithSuccess("/login", "You are logged in!"); 
  //or with description and message (works for all the other utilities as well)
  return redirectWithSuccess("/login", { message: "You are logged in!", description: "description of toast" });
}

redirectWithError

重定向到新路由并显示错误 toast 消息。

import { redirectWithError } from "remix-toast";

export const action = () => {
  return redirectWithError("/login", "You need to login to access this page");
}

redirectWithInfo

重定向到新路由并显示信息 toast 消息。

import { redirectWithInfo } from "remix-toast";

export const action = () => {
  return redirectWithInfo("/login", "You need to login to access this page");
};

redirectWithWarning

重定向到新路由并显示警告 toast 消息。

import { redirectWithWarning } from "remix-toast";

export const action = () => {
  return redirectWithWarning("/login", "You need to login to access this page");
};

dataWithSuccess

显示成功 toast 消息，不进行重定向。

import { dataWithSuccess } from "remix-toast";

export const action = () => {
  return dataWithSuccess({ result: "Data saved successfully" }, "Operation successful! 🎉");
   //or with description and message (works for all the other utilities as well)
  return dataWithSuccess({ result: "Data saved successfully" }, { message: "Operation successful! 🎉", description: "description of toast" });
};

dataWithError

显示错误 toast 消息，不进行重定向。

import { dataWithError } from "remix-toast";

export const action = () => {
  return dataWithError(null, "Oops! Something went wrong. Please try again later.");
};

dataWithInfo

显示信息 toast 消息，不进行重定向。

import { dataWithInfo } from "remix-toast";

export const action = () => {
  return dataWithInfo({ info: "Additional information" }, "Your profile has been successfully updated.");
};

dataWithWarning

显示警告 toast 消息，不进行重定向。

import { dataWithWarning } from "remix-toast";

export const action = () => {
  return dataWithWarning({ warning: "Potential issues" }, "Your session is about to expire.");
};

感谢

如果你想支持这个项目，你可以通过收藏这个仓库并与你的朋友分享来实现。

感谢这个项目的所有贡献者以及对社区的支持。你们太棒了！