notistack: react

一个 snakebar 的交互

安装

yarn add notistack

使用

import { SnackbarProvider, useSnackbar } from 'notistack'

// wrap your app
<SnackbarProvider>
  <App />
  <MyButton />
</SnackbarProvider>

const MyButton = () => {
  const { enqueueSnackbar, closeSnackbar } = useSnackbar()
  return (
    <Button onClick={() => enqueueSnackbar('I love hooks')}>
      Show snackbar
    </Button>
  )
}

API: open

const key = enqueueSnackbar(message, options)
// or
const key = enqueueSnackbar({ message, ...options })

API: close

// dismiss all open snackbars
closeSnackbar()

// dismiss a specific snackbar by passing 
// the key returned from enqueueSnackbar
closeSnackbar(key)

参考