Notistack可定制 Web 應用通知組件

Notstack 是一個通知庫，使得網絡應用程序上顯示通知變得非常容易。它是高度可定制的，可以讓通知框堆疊在彼此的頂部。

堆疊行為	達到 maxSnack 時關閉最舊的（此處設置為 3）

如何使用

1：將應用程序包裝在 SnackbarProvider 組件中：（有關可用道具的完整列表，請參閱API 參考）

注意：如果使用的是 material-ui ThemeProvider，請確保 SnackbarProvider 是它的子項。

import { SnackbarProvider } from 'notistack';

<SnackbarProvider>
    <MyApp />
</SnackbarProvider>

2：使用 withSnackbar 導出任何需要發(fā)送通知的組件。這樣做可以訪問兩種方法 enqueueSnackbar 和closeSnackbar，前者可用于發(fā)送 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)