npm 包 @marudor/react-notification-system 使用教程

在现代前端开发中，往往需要使用一些弹窗或者提示框等组件，@marudor/react-notification-system 就是这样一个非常实用的组件库。它提供了丰富的弹窗类型以及预设样式，能够轻松实现多种场景下的提示需求。本文将详细介绍如何使用 @marudor/react-notification-system。

安装和引入

在开始使用 @marudor/react-notification-system 之前，需要先确保已经安装了 Node.js 和 npm。我们可以在项目中通过 npm 安装 @marudor/react-notification-system：

npm install @marudor/react-notification-system

安装完成后，在需要使用的地方引入组件即可：

import React from 'react';
import NotificationSystem from '@marudor/react-notification-system';
import '@marudor/react-notification-system/dist/style.css';

需要注意的是，在使用之前，还需要导入组件的 CSS 样式文件。

使用方法

@marudor/react-notification-system 的使用非常简单，只需要先创建一个 NotificationSystem 实例，然后调用它提供的方法就可以实现各种提示框效果。

创建实例

const notificationSystem = React.createRef();

显示成功提示框

const successNotification = {
  title: 'Success',
  message: 'These changes have been saved!',
  level: 'success'
};

notificationSystem.current.addNotification(successNotification);

显示错误提示框

const errorNotification = {
  title: 'Error',
  message: 'Something went wrong!',
  level: 'error'
};

notificationSystem.current.addNotification(errorNotification);

显示信息提示框

const infoNotification = {
  title: 'Info',
  message: 'Welcome to the website!',
  level: 'info'
};

notificationSystem.current.addNotification(infoNotification);

显示警告提示框

const warningNotification = {
  title: 'Warning',
  message: 'You have not saved your changes!',
  level: 'warning',
  position: 'bl'
};

notificationSystem.current.addNotification(warningNotification);

参数说明

@marudor/react-notification-system 接受多个参数，下面列出一些常用参数：

• title: 提示框标题；
• message: 提示框内容；
• level: 提示框样式，可以是 success、error、info 或 warning，对应不同的颜色和图标；
• position: 提示框位置，可以是 tr（右上）、tc（中上）、tl（左上）、br（右下）、bc（中下）或 bl（左下）。

总结

@marudor/react-notification-system 是一个非常实用的提示框组件库，可以轻松实现多种场景下的提示需求。本文介绍了如何安装、引入和使用 @marudor/react-notification-system，并列出了一些常用参数。希望本文对你有所帮助，如果有任何问题或建议，欢迎留言讨论。

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