A beautiful standalone snackbar for react
npm install react-notistackA minimal beautiful standalone Toast/Snackbar for your react web application.
Table of Contents
--
- How to use
- Online demo
- Credits
npm install react-notistack
yarn add react-notistack
`$3
1: Wrap your app inside a
SnackbarProvider component: (see docs for a full list of available props)
Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.
`jsx
import { SnackbarProvider } from 'react-notistack';
`
2: Export any component that needs to send notification using
withSnackbar. By doing this, you'll have access to methods enqueueSnackbar and closeSnackbar, where the former can be used to send snackbars.`javascript
import { withSnackbar } from 'react-notistack';class MyComponent extends Component {
handleNetworkRequest = () => {
fetchSomeData()
.then(() => this.props.enqueueSnackbar('Successfully fetched the data.'))
.catch(() => this.props.enqueueSnackbar('Failed fetching data.'));
};
render(){
//...
};
};
export default withSnackbar(MyComponent);
`2 (alternative): You can use
useSnackbar hook in your functional components as well.`javascript
import { useSnackbar } from 'react-notistack';const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar('I love hooks');
};
return (
);
}
``