Notistack可定制 Web 应用通知组件-技术圈

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)