Open programming-with-ia opened 2 months ago
Having the same issue!
Having the same issue!
@srkuleo
use directly
toast()
more info
I don't quite understand what you are referring to. Currently I am rendering my toasts as part of a client actions in Next.js depending on what response is being returned from the server action. For example res.status === "success-redirect" would allow me to add Link anchor while regular "success" or "error" would render Close button.
import Link from "next/link";
import debounce from "lodash.debounce";
import { toast } from "sonner";
// Accepts 1-3 args
// - message to be rendered inside toast
// Optional - if toast should redirect:
// - path - user is being redirected to after clicking the button inside toast
// - linkText - text to be rendered as the redirect button
export const showToast = debounce(
(message: string, path?: string, linkText?: string) =>
toast.custom(
(t) => (
<div className="select-none pb-8">
<div className="flex items-center justify-between rounded-lg bg-white p-4 text-sm shadow-lg ring-[1.5px] ring-slate-400/55 dark:bg-slate-900 dark:shadow-black dark:ring-slate-800">
<div className="flex max-w-[75%] items-center gap-1.5">
<p className="font-manrope text-slate-600 dark:text-slate-200">
{message}
</p>
</div>
{path && linkText ? (
<Link
href={path}
onClick={() => toast.dismiss(t)}
className="text-center font-semibold text-green-500"
>
{linkText}
</Link>
) : (
<button
onClick={() => toast.dismiss(t)}
className="text-center font-semibold text-green-500"
>
Close
</button>
)}
</div>
</div>
),
{ unstyled: true },
),
250,
);
While I was able to achieve my custom look, I still couldn't get rid of padding / inset on X axis. Here is the picture:
I would like it removed so I can make it smaller, almost touching edges of the screen.
for custom styling check-out globals.css
if you find something helpful please follow me and star my repo 😊
Describe the feature / bug 📝:
unstyled: false, not working in toast.custom()