notistack

Notistack：通过函数调用显示通知。

</div> <div align="center"> 易于使用，可自定义，平滑过渡，可堆叠和排队！ </div> <div align="center"> <a href="https://notistack.com">文档</a> <span> · </span> <a href="https://notistack.com/features/basic">示例</a> </br> </br>

</div>

入门

使用你喜欢的包管理器：

npm install notistack
yarn add notistack

版本指南

版本	说明
`v3.x.x`	最新稳定版本。独立版本（即不依赖于 material-ui）
<= `v2.0.8`	需要 Material-UI v5 作为对等依赖。`npm install notistack@2.0.8`
<= `1.0.10`	需要 Material-UI <= v4 作为对等依赖。`npm install notistack@latest-mui-v4`

如何使用

实例化一个 SnackbarProvider 组件并开始显示提示栏：（查看文档了解可用属性的完整列表）

import { SnackbarProvider, enqueueSnackbar } from 'notistack';

const App = () => {
  return (
    <div>
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('这很简单！')}>显示提示栏</button>
    </div>
  );
};

或者，你可以使用 useSnackbar 钩子来显示提示栏。只需记住将你的应用程序包裹在 SnackbarProvider 内，以便访问钩子上下文：

import { SnackbarProvider, useSnackbar } from 'notistack';

// 包裹你的应用
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  return <Button onClick={() => enqueueSnackbar('我喜欢钩子')}>显示提示栏</Button>;
};