Notistack小吃吧

Notistack是React的轻量级通知框架。Notistack小吃吧是一个使用Notistack的React应用程序，用于展示与通知有关的消息，并提供了许多关于如何使用Notistack的示例。

特性

• 显示成功、警告、错误和信息通知
• 自定义通知样式
• 向通知添加操作按钮和事件处理程序
• 展示多个通知时对它们进行栈排序

安装

在终端中执行以下命令以安装 Notistack 小吃吧。

npm install

使用方法

在终端中执行以下命令以启动应用程序。

npm start

该应用程序展示了如何使用 Notistack。你可以查看 App.js 的源代码来了解这个应用是如何工作的。

示例

显示通知

import React from "react";
import { Button } from "@material-ui/core";
import { useSnackbar } from "notistack";

function App() {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar("This is a success message!", { variant: "success" });
  };

  return <Button onClick={handleClick}>Show success message</Button>;
}

向通知中添加操作按钮和事件处理程序

import React from "react";
import { Button } from "@material-ui/core";
import { useSnackbar } from "notistack";

function App() {
  const { enqueueSnackbar } = useSnackbar();

  const handleClick = () => {
    enqueueSnackbar("Do you want to undo this action?", {
      variant: "info",
      action: () => (
        <Button color="secondary" size="small">
          Undo
        </Button>
      ),
    });
  };

  return <Button onClick={handleClick}>Show info message with action</Button>;
}

自定义通知样式

import React from "react";
import { Button, makeStyles } from "@material-ui/core";
import { useSnackbar } from "notistack";

const useStyles = makeStyles((theme) => ({
  message: {
    display: "flex",
    alignItems: "center",
  },
  icon: {
    marginRight: theme.spacing(1),
  },
}));

function App() {
  const { enqueueSnackbar } = useSnackbar();
  const classes = useStyles();

  const handleClick = () => {
    enqueueSnackbar("This is a custom message with an icon!", {
      variant: "info",
      persist: true,
      preventDuplicate: true,
      content: (key, message) => (
        <div className={classes.message}>
          <i className={`fas fa-info-circle ${classes.icon}`} />
          <span>{message}</span>
        </div>
      ),
    });
  };

  return (
    <Button onClick={handleClick}>
      Show info message with custom style
    </Button>
  );
}

作者

Notistack小吃吧是由 [XX公司] 开发的。如果你在使用过程中遇到任何问题或有任何建议，请 提交issue。

许可证

Notistack小吃吧是根据 MIT许可证 进行许可的。