persian-toaster
v1.0.0
Published
RTL Persian/Farsi toast notifications built on Sonner
Downloads
21
Maintainers
whitedivReadme
Persian Toaster
RTL (Right-to-Left) toast notifications for Persian/Farsi apps, built on Sonner.
Installation
npm install persian-toaster sonner
# or
pnpm add persian-toaster sonner
# or
yarn add persian-toaster sonnerPeer dependencies: react (>=18), sonner (>=1.0)
Setup
- Add the Toaster to your root layout (from Sonner):
import { Toaster } from "sonner";
export default function Layout({ children }) {
return (
<html>
<body>
{children}
<Toaster position="top-center" />
</body>
</html>
);
}- Import the styles in your app (e.g. in
layout.tsxor_app.tsx):
import "persian-toaster/styles.css";- Use the toast anywhere in your app:
import { persianToast } from "persian-toaster";
// Success
persianToast.success("عملیات موفق", "اطلاعات با موفقیت ذخیره شد");
// Error
persianToast.error("خطا", "مشکلی پیش آمد");
// Info
persianToast.info("توجه", "لطفاً این مورد را بررسی کنید");
// Warning
persianToast.warning("هشدار", "این عمل قابل بازگشت نیست");
// Loading
persianToast.loading("در حال پردازش...", "لطفاً صبر کنید");With custom Persian font
Pass fontFamily in options to use your app's Persian font:
persianToast.success("موفق", "ذخیره شد", {
fontFamily: "var(--font-iran-sans)",
});Or use persianToast.custom() for full control:
persianToast.custom({
title: "عنوان",
description: "توضیحات",
type: "success",
fontFamily: "var(--font-iran-sans)",
action: {
label: "تأیید",
onClick: () => console.log("clicked"),
},
cancel: {
label: "انصراف",
onClick: () => {},
},
});Dark mode
Toasts automatically detect dark mode when document.documentElement has the dark class (e.g. html.dark or html class="dark").
API
| Method | Signature |
|----------|----------------------------------------------------------|
| success | (title, description?, options?) => ToastId |
| error | (title, description?, options?) => ToastId |
| warning | (title, description?, options?) => ToastId |
| info | (title, description?, options?) => ToastId |
| loading | (title, description?, options?) => ToastId |
| custom | (options: ToastProps) => ToastId |
License
MIT