@aminekun90/反应吐槽:

轻而易举的高性能 基于钩子 用于React 18 & 19. 的土司通知库.

软件

查看 React Demo

与 Angular 库共享其核心引擎和样式表 @aminekun90/ngx-toast ——行为和主题相同.

关键特性

• ⚛️ 反应 18 & 19 准备: 完全支持并联模式和最新反应特性.
• ⚓ 基于 Hook 的 API: 简单而直观 useToast() 钩入触发通知.
• 🎨 FontAsome 整合:专业相片被烤入.
• ♿ 可访问数字 : role="alert", (中文(简体) ), aria-live,键盘解析(Enter/Space/Escape),焦点样式.
• ⏸️ 暂停悬浮: 计时器和进度栏在徘徊/聚焦时暂停.
• 🌙 主题和暗模式: 有5个内置主题,全CSS可变定制,自动暗模式.
• 🧩 全局默认值: 配置位置、 持续时间、 最大堆栈、 通过 <ToastProvider config>。 。 。 .
• 🔁 承诺加载土司( L)数字 : loading() 财务报告和审定财务报表 promise() 帮助交换位置.
• 📦 小声:小捆绑,与Vite最优化,0外跑时道克.

安装

通过 雅伦数字 :

yarn add @aminekun90/react-toast

同伴依赖关系

确保您安装了下列依赖性( 图标和对等比需要):

yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

配置

用 ToastProvider。 。 。 .

import { ToastProvider } from '@aminekun90/react-toast';

export function App() {
  return (
    <ToastProvider> <!-- Mandatory -->
      <MyMainComponent />
    </ToastProvider>
  );
}

使用量

1. 增加全球集装箱

设置 ToastContainer 在应用程序的根( 通常在 App.tsx) (中文(简体) ). 它将管理所有有效通知的堆放.

import { ToastContainer } from '@aminekun90/react-toast';

export default function App() {
  return (
    <div className="app-root">
      <ToastContainer />
      <MyContent />
    </div>
  );
}

2. 触发通知

使用 useToast 钩子在你体内的任何地方 ToastProvider。 。 。 .

import { useToast } from '@aminekun90/react-toast';

export function MyComponent() {
  const { success, error, info, warning } = useToast();

  const handleAction = () => {
    success('Operation successful!', 'Success');
  };

  return <button onClick={handleAction}>Click me</button>;
}

3. 全球缺省(可选)

<ToastProvider config={{
  position: 'top-right',
  duration: 4000,
  pauseOnHover: true,
  maxToasts: 5,
  preventDuplicates: true,
  newestOnTop: true,
}}>
  <App />
</ToastProvider>

4. 装入并许诺吐司

const { loading, success, promise } = useToast();

const id = loading('Uploading…');
// later: success('Done!', undefined, { id });

await promise(saveUser(), {
  loading: 'Saving…',
  success: (user) => `Saved ${user.name}`,
  error: (err) => `Failed: ${err}`,
});

API 参考

托斯特配置属性

他们

5个内置主题,每个土司或全球适用;一切都是CSS可变的 为完全定制而驱动.

success('Saved!', undefined, { theme: 'glass' });

<body class="ngx-toast-theme-material">…</body>

* 全文参考: 文件/主题.md • 妇女 🏗️ 文献/档案

兼容性

保留此工程: coffee:

我花时间和精力维持这个图书馆。 如果有帮助,请考虑捐赠!

通过 PayPal 捐款

许可证

麻省理工学院执照,由Amine Bouzahar执导.