React Snackbar

A minimal beautiful standalone Toast/Snackbar for your react web application.

Table of Contents
--
- How to use
- Online demo
- Credits

Getting Started

Use your preferred package manager:
``
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 (
Show snackbar
);
}
``

$3

Demo here

codesandbox

$3

Will be added soon.

$3

- Further improvement

$3

This snackbar idea is comes from Notistack by Hossein Dehnokhalaji which is depend on material-ui.
And the design of snackbar/toastr catched from bootstrap.

$3

Open an issue and your problem will be solved.

$3

Saiful Alam - https://msar.me