Notstack 是一个通知库，使得网络应用程序上显示通知变得非常容易。它是高度可定制的，可以让通知框堆叠在彼此的顶部。
| 堆叠行为 | 达到 maxSnack 时关闭最旧的（此处设置为 3） |
|---|---|
 |
 |
如何使用
1：将应用程序包装在 SnackbarProvider 组件中：（有关可用道具的完整列表，请参阅API 参考）
注意：如果使用的是 material-ui ThemeProvider，请确保 SnackbarProvider 是它的子项。
import { SnackbarProvider } from 'notistack';
<SnackbarProvider>
<MyApp />
</SnackbarProvider>
2：使用 withSnackbar 导出任何需要发送通知的组件。这样做可以访问两种方法 enqueueSnackbar 和closeSnackbar，前者可用于发送 snackbar。
import { withSnackbar } from 'notistack';
class MyComponent extends Component {
handleConnectionLoss = () => {
this.key = this.props.enqueueSnackbar('You're offline.');
};
handleBackOnline = () => {
this.props.closeSnackbar(this.key);
};
render() {
//...
};
}
export default withSnackbar(MyComponent);
2（替代）：也可以在功能组件中使用 useSnackbar hook。
import { useSnackbar } from 'notistack';
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar('I love hooks');
};
return (
<Button onClick={handleClick}>Show snackbar</Button>
);
}
enqueueSnackbar：将 snackbar 添加到要显示给用户的队列中。它接受两个参数消息和一个选项对象，并返回一个键，用于稍后引用该 snackbar（例如以编程方式关闭它）。
const key = this.props.enqueueSnackbar(message, options)
closeSnackbar：使用给定的键关闭 snackbar，可以通过不向此功能传递键来立即关闭所有 snackbar。
// dismiss all open snackbars
this.props.closeSnackbar()
// dismiss a specific snackbar
this.props.closeSnackbar(key)
评论