tipddy-snackbar

Table of Contents

- How to use
- Online demo
- Documentation
- Redux / Mobx support

Getting Started

Use your preferred package manager:

``
npm install tippdy-snackbar
yarn add tippdy-snackbar
`

$3

1: Wrap your app inside a SnackProvider component:



`jsx
import { SnackbarProvider } from "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 "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 "notistack";
const MyButton = () => {
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar("I love hooks");
};
return Show snackbar;
};
`

$3

Visit documentation website` to see all the demos.

Or play with a minimal working example: codesandbox

$3

notistack is compatible with state management libraries such as Redux and Mobx.

$3

Open an issue and your problem will be solved.

$3

Hossein Dehnokhalaji