npm 包 react-notification-solo 使用教程

React Notification Solo 是一个可定制的基于 React 的通知系统。它能够根据你的需求来展示各种类型的通知。它使用简单，功能强大，支持不同的主题和配置选项。

在这篇文章中，我们将了解如何使用这个 npm 包来构建一个漂亮的通知系统。

准备工作

为了使用 React Notification Solo，我们需要先安装它。在命令行中运行下面的命令：

npm install react-notification-solo

安装完成后，我们就可以在代码中使用这个包了。

基本用法

首先，我们需要在代码中导入 NotificationContainer 和 NotificationManager 组件。这两个组件都需要在 App 组件中使用。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------------- ------------------- - ---- --------------------------

-------- ----- -
  ------ -
    ---- ----------------
      ------- -----------------------------------
      ---------------------- --
    ------
  --
-

现在我们需要在点击按钮时触发通知。在 handleClick 函数中，我们可以创建一个通知并将其传递给 NotificationManager 的 add 方法。

function handleClick() {
  NotificationManager.add({
    title: '这是标题',
    message: '这是内容',
    img: 'https://via.placeholder.com/50',
    duration: 5000,
  });
}

现在，每当用户点击按钮时，通知就会出现。

配置选项

React Notification Solo 提供了一些选项来帮助你定制通知，如主题、位置和持续时间等等。

主题

React Notification Solo 提供许多内置的主题，可以通过将 theme 参数传递给 NotificationManager 来设置。例如，要使用 Bootstrap4 主题：

import 'react-notification-solo/dist/index.css';
// ...
NotificationManager.add({
  theme: 'bootstrap4',
  title: '这是标题',
  message: '这是内容',
  duration: 5000,
});

位置

通过将 position 参数传递给 NotificationManager 可以设置通知的位置。位置可以是任何字符串，但常见的有 'top-left'，'top-right'，'bottom-left' 和 'bottom-right'。默认是 'top-right'。

NotificationManager.add({
  title: '这是标题',
  message: '这是内容',
  position: 'bottom-right',
  duration: 5000,
});

持续时间

默认持续时间是 5000 毫秒。你可以通过在 add 方法中传递 duration 参数来更改持续时间。

NotificationManager.add({
  title: '这是标题',
  message: '这是内容',
  duration: 10000,
});

在上面的示例中，duration 设置为 10000 毫秒，也就是 10 秒。

自定义元素和样式

React Notification Solo 还可以根据你的需求添加自定义内容。你可以通过将自定义元素传递给 message 和 title 的参数来实现。

<div className="custom-style">
  <h5 className="custom-title">这是自定义标题</h5>
  <p className="custom-message">这是自定义内容</p>
</div>

然后将其传递给 add 方法的 message 和 title 参数：

NotificationManager.add({
  title: <div className="custom-style"><h5 className="custom-title">这是自定义标题</h5></div>,
  message: <div className="custom-style"><p className="custom-message">这是自定义内容</p></div>,
});

自定义事件

最后，我们可以通过传递一个自定义事件来执行某些操作。当用户单击通知时，通知将触发此事件。

NotificationManager.add({
  title: '这是标题',
  message: '这是内容',
  duration: 5000,
  onClick: () => alert('我被点击了！'),
});

在上面的示例中，当用户单击通知时，将显示一个警告框。

总结

React Notification Solo 是一个强大且易于使用的通知库，使用简单并且可以通过自定义来满足你的需求。我们应该学会如何使用它，以便在我们的应用程序中实现漂亮的通知。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd105