Remix Toast：为您的Remix应用带来服务器端通知的利器

邓旭诚Kit

于 2024-09-02 09:44:56 发布

阅读量151

点赞数 2

本文链接：https://blog.csdn.net/gitblog_00113/article/details/141810195

版权

Remix Toast：为您的Remix应用带来服务器端通知的利器

remix-toastServer side implementation of toast notifications in Remix项目地址:https://gitcode.com/gh_mirrors/re/remix-toast

在现代Web开发中，为用户提供即时反馈是提升用户体验的关键。Remix Toast是一个专为Remix.run框架设计的服务器端通知管理库，它允许开发者轻松地在应用中集成和展示各种类型的通知消息。本文将深入介绍Remix Toast的功能、技术实现以及应用场景，帮助您了解并开始使用这一强大的工具。

项目介绍

Remix Toast是一个简单而强大的服务器端通知管理库，专为Remix.run框架设计。它提供了所有必要的工具，帮助开发者在应用中展示通知消息。客户端的实现完全由开发者决定，可以使用任何喜欢的库来展示这些通知。

项目技术分析

Remix Toast利用@remix-run/server-runtime的原语来创建一个cookie会话，这意味着它是服务器无关的，可以与任何服务器设置一起工作。通过在root.tsx文件中添加必要的代码，开发者可以轻松地在应用的任何部分展示通知。

项目及技术应用场景

Remix Toast适用于任何需要即时反馈的Web应用场景，例如：

用户操作反馈：在用户执行登录、注册、提交表单等操作后，提供成功或失败的通知。
系统状态更新：在后台任务完成或系统状态发生变化时，向用户发送通知。
错误处理：在用户遇到错误或异常情况时，及时通知用户并提供解决方案。

项目特点

服务器无关：使用@remix-run/server-runtime的原语，确保与任何服务器设置兼容。
灵活的客户端实现：开发者可以选择任何喜欢的通知库来展示通知，如react-toastify或sonner。
丰富的通知类型：支持成功、错误、信息和警告等多种通知类型，满足不同场景的需求。
易于集成：只需在root.tsx文件中添加几行代码，即可在应用中全局使用通知功能。

安装与设置

安装

npm install remix-toast

服务器端设置

在root.tsx文件中添加以下代码：

import { getToast } from "remix-toast";

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

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

  return (
    ...
  );
}

客户端设置

选择您喜欢的通知库，例如react-toastify：

import { json, type LinksFunction, type LoaderFunctionArgs } from "@remix-run/node";
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from "@remix-run/react";
import { useEffect } from "react";
import { getToast } from "remix-toast";
import { ToastContainer, toast as notify } from "react-toastify";
import toastStyles from "react-toastify/dist/ReactToastify.css";

export const links: LinksFunction = () => [{ rel: "stylesheet", href: toastStyles }];
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { toast, headers } = await getToast(request);
  return json({ toast }, { headers });
};

export default function App() {
  const { toast } = useLoaderData<typeof loader>();
  useEffect(() => {
    if (toast) {
      notify(toast.message, { type: toast.type });
    }
  }, [toast]);

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

结语

Remix Toast是一个强大而灵活的服务器端通知管理库，适用于任何Remix.run应用。通过简单的安装和设置，您可以轻松地在应用中集成各种类型的通知，

remix-toastServer side implementation of toast notifications in Remix项目地址:https://gitcode.com/gh_mirrors/re/remix-toast

邓旭诚Kit

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Remix Toast：为您的Remix应用带来服务器端通知的利器

Remix Toast：为您的Remix应用带来服务器端通知的利器 remix-toastServer side implementation of toast notifications in Remix项目地址:https://gitcode.com/gh_mirrors/re/remix-toast 在现代Web开发中，为用户提供即时反馈是提升用户体验的关键。Remix Toast是一个专...
复制链接

扫一扫