{"library":"remix-toast","title":"Server-Side Toast Notifications for Remix","description":"remix-toast provides utility functions to manage server-side toast notifications within Remix applications, leveraging web standards like `Set-Cookie` for flash messages. It seamlessly integrates with Remix's `loader` and `action` functions and supports React Router v7. The current stable version is 4.0.0, which includes an upgrade to Zod v4. The package appears to have an active release cadence, with frequent updates (minor and patch releases) to address bug fixes, introduce new features like `replaceWithFlash`, and maintain compatibility with new versions of Remix and React Router (e.g., v7.9+ for `react-router`). Key differentiators include its server-side first approach, middleware support for global toast management, and flexible session storage configuration, allowing custom utility creation with `createToastUtilsWithCustomSession`.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install remix-toast"],"cli":null},"imports":["import { createToast } from 'remix-toast';","import { getToast } from 'remix-toast/middleware';","import { unstable_toastMiddleware } from 'remix-toast/middleware';","import { useToast } from 'remix-toast';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createCookieSessionStorage, redirect } from '@remix-run/node';\nimport { createToast, getToast, unstable_toastMiddleware } from 'remix-toast/middleware';\nimport { json } from '@remix-run/react';\nimport type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData } from '@remix-run/react';\n\n// 1. Configure a session storage (replace with your actual session store)\nconst { getSession, commitSession } = createCookieSessionStorage({\n  cookie: {\n    name: '__session',\n    httpOnly: true,\n    maxAge: 60 * 60 * 24 * 7, // 1 week\n    secrets: [process.env.SESSION_SECRET ?? 'super-secret'],\n    secure: process.env.NODE_ENV === 'production',\n  },\n});\n\n// 2. Setup toast middleware\nexport const { toast, flash } = createToast(getSession, commitSession);\n\nexport const loader = async ({ request }: LoaderFunctionArgs) => {\n  const { toast, headers } = await getToast(request);\n  // Simulate fetching some data\n  const data = { message: 'Welcome back!' };\n  return json({ data, toast }, { headers });\n};\n\nexport const action = async ({ request }: ActionFunctionArgs) => {\n  const formData = await request.formData();\n  const email = formData.get('email');\n\n  if (email === 'error@example.com') {\n    return await toast.error(redirect('/'), { message: 'Invalid email address.' });\n  }\n\n  return await toast.success(redirect('/'), { message: 'Subscription successful!' });\n};\n\nexport default function Index() {\n  const { toast } = useLoaderData<typeof loader>();\n\n  return (\n    <div>\n      {toast && (\n        <div style={{ padding: '10px', background: toast.type === 'error' ? 'red' : 'green', color: 'white' }}>\n          {toast.message}\n        </div>\n      )}\n      <h1>Remix Toast Example</h1>\n      <form method=\"post\">\n        <input type=\"email\" name=\"email\" placeholder=\"Enter email\" />\n        <button type=\"submit\">Subscribe</button>\n      </form>\n    </div>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates how to set up server-side toast notifications in a Remix application using `remix-toast`. It covers configuring a session storage, initializing the `toast` utility, extracting and displaying toasts in a `loader` and `action`, and rendering them on the client-side.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}