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)