{"_id":"@b1zzu/notistack","_rev":"2-9dd00b804b6503029fe046e79420d2ed","name":"@b1zzu/notistack","dist-tags":{"latest":"0.5.0"},"versions":{"0.4.2":{"name":"@b1zzu/notistack","version":"0.4.2","description":"Highly customisable notification snackbars (Highly customizable notification snackbars (toasts) that can be stacked on top of each other) that can be stacked on top of each other","main":"build/index","license":"MIT","author":{"name":"Hossein Dehnokhalaji","email":"hossein.dehnavi98@yahoo.com","url":"https://github.com/iamhosseindhv/notistack"},"homepage":"https://www.iamhosseindhv.com/notistack","repository":{"url":"git+https://github.com/iamhosseindhv/notistack.git","type":"git"},"scripts":{"transpile":"babel src -d build --copy-files","prepublishOnly":"npm run transpile","eslint":"eslint . --ext .js,.jsx"},"peerDependencies":{"react":"^16.4.2","react-dom":"^16.4.2","@material-ui/core":"^3.2.0"},"devDependencies":{"@material-ui/core":"^3.2.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.5.0","babel-preset-stage-2":"^6.5.0","babel-runtime":"^6.26.0","eslint":"^5.3.0","eslint-config-airbnb":"^17.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.10.0","prop-types":"^15.6.2","react":"^16.4.2","react-dom":"^16.4.2"},"dependencies":{"prop-types":"^15.6.2","classnames":"^2.2.6"},"bugs":{"url":"https://github.com/iamhosseindhv/notistack/issues"},"contributors":[{"name":"Hossein Dehnokhalaji","url":"https://www.iamhosseindhv.com/"}],"keywords":["notistack","enqueueSnackbar","snackbarprovider","react","javascript","material-ui","material ui","toast","redux","snackbar","stacked","notification","material design"],"gitHead":"e3d90dca5d040f17541916a8a9ae421cf03b8d11","_id":"@b1zzu/notistack@0.4.2","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"b1zzu","email":"david3bizzarri@gmail.com"},"dist":{"integrity":"sha512-KpgLO6TXJdMVUq5M9wx0lOp932wf3tcQfqWt+3qjm2PIIjwDSak3NC6s91iDZB4/SKRR/zlvgZCTW2lN71LYGw==","shasum":"4b32c38c6df98031bdb85daf544423ab1c974771","tarball":"https://registry.npmjs.org/@b1zzu/notistack/-/notistack-0.4.2.tgz","fileCount":16,"unpackedSize":54023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcb/ekCRA9TVsSAnZWagAAd0EP+wc4vo0cp3ESXkqemdGT\nFzmlAg0f8bHJpWQsH96fxO9C9VRsJ0em2pUFWNAATRTbPHy/ZWmmAMeQSCdr\nhYAlqpxIQrBbRH0n7UKdqj67oeYZ8BIsje6qK+XIxx8RTTPADZsCfQ20ipdc\neZx7tE+1Ed1hv+92ifUJRS0MpHZz/aB7CDgGoHS6eXuiH7dCIqzoTQIi9zZH\nettib1Kqrzzg0LPdtUlB7bC8mfMycNdFRRMZX3uNrw6o/q07u62r6vg/RlyX\nHL4NgUqu2QW5BnvXMQgMvwLwjC9WoJjmuRsnegM88abxyYYwnqWBReaLuczn\nEubXu0/6xnHUOHnBMUMuopWok72XoHP7g2IKCT5HVFRaHhRATFumOFir0UQP\nb8ygQjKL3wo+XZ6U20slC0Lyv61B6HaMDzaR3h2ptMS03G7ne7PkFcb9i18d\nxsBuTd3dMcaGHNj+40vCEEQJn7ka+GyHgVBQU0Ov+mCod4uZ2yx30XQg1L2I\n1avxPwToeqyWLMoVs+8hQhlNkT6OnP0pg/B9qsoy7db0anecf1U2bP41Er1p\nVQYvNxH74XNhq8cg8EEUiR1qyS3GqoNDmVuOPaaH6wO4uxVC+v0j5wqYE1H8\nRAsgftyVLbAIYMBil9sFmgsRqCSPYRze4bG4Or9yey4fOdWT0MAl+Qm7z8NA\nr/Dk\r\n=CDWs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEwTTpjbDFHSpgN2sXPhmjx/H/cdbRw2XJVi00C10vp1AiBTPVwHXwEFr0jHbzbId6hGLW9966Rt2U8Uy4MRjcC/TA=="}]},"maintainers":[{"name":"b1zzu","email":"david3bizzarri@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/notistack_0.4.2_1550841763586_0.13337609045876175"},"_hasShrinkwrap":false},"0.5.0":{"name":"@b1zzu/notistack","version":"0.5.0","description":"Highly customisable notification snackbars (Highly customizable notification snackbars (toasts) that can be stacked on top of each other) that can be stacked on top of each other","main":"build/index","license":"MIT","author":{"name":"Hossein Dehnokhalaji","email":"hossein.dehnavi98@yahoo.com","url":"https://github.com/iamhosseindhv/notistack"},"homepage":"https://www.iamhosseindhv.com/notistack","repository":{"url":"git+https://github.com/iamhosseindhv/notistack.git","type":"git"},"scripts":{"transpile":"babel src -d build --copy-files","prepublishOnly":"npm run transpile","eslint":"eslint . --ext .js,.jsx"},"peerDependencies":{"react":"^16.4.2","react-dom":"^16.4.2","@material-ui/core":"^3.2.0"},"devDependencies":{"@material-ui/core":"^3.2.0","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-eslint":"^8.2.6","babel-loader":"^7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-react-jsx":"^6.24.1","babel-preset-env":"^1.7.0","babel-preset-react":"^6.5.0","babel-preset-stage-2":"^6.5.0","babel-runtime":"^6.26.0","eslint":"^5.3.0","eslint-config-airbnb":"^17.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.10.0","prop-types":"^15.6.2","react":"^16.4.2","react-dom":"^16.4.2"},"dependencies":{"prop-types":"^15.6.2","classnames":"^2.2.6"},"bugs":{"url":"https://github.com/iamhosseindhv/notistack/issues"},"contributors":[{"name":"Hossein Dehnokhalaji","url":"https://www.iamhosseindhv.com/"}],"keywords":["notistack","enqueueSnackbar","snackbarprovider","react","javascript","material-ui","material ui","toast","redux","snackbar","stacked","notification","material design"],"gitHead":"e3d90dca5d040f17541916a8a9ae421cf03b8d11","_id":"@b1zzu/notistack@0.5.0","_npmVersion":"6.5.0","_nodeVersion":"11.9.0","_npmUser":{"name":"b1zzu","email":"david3bizzarri@gmail.com"},"dist":{"integrity":"sha512-tOl97eAGMtiDUYdsXwDquFknJokC17/oubucO0WeDOqLWyOfJQCdkUB0BP3ZT/K7k0mRCN9VFWOIF2exB3emeA==","shasum":"a7e6fe0fcc3023f9fa417d233b8582bfefa44c9b","tarball":"https://registry.npmjs.org/@b1zzu/notistack/-/notistack-0.5.0.tgz","fileCount":16,"unpackedSize":54023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcb/fECRA9TVsSAnZWagAAfXEP/iqqrpu3rDqk74cYstUy\ntDVgSS6Kd0Mrv/HowvRjegZB7VGapm5qh/wBG985tFCSJAczaP+gZApSh1Z8\nmRTZbWU26MwMBoD2Y44Q7EMGOhtub2B2/FywPgxiz3qevR4T9wRZlOtBNmUD\nLfxPq6nvoEmVCSVkriYDkxYLB0HkqAsPI8i0GQyxfjxKblOXDo0/7REMCx/Z\n2YElwunHXKEhZEZeFg/6kQvYUseo5Md8JjbLFcxHi20krsjmt8AivJdG843C\nWf285LrstWpL1y82lkEVYx7Shz36M6r3oO8taiA4x1HQr4tdTKjiBceg6NeX\n2U4NnhANzlvDL4v9DJ9ntdJuGUNqmSPmezj5D4l79be7xSypuOAL28tXphuw\n45taqItD16yvXOCZZGJ17m4nv8ODpJ2qRZVamLFOa95qS1E79llxWL0ke3j4\nFyHulZOFoiQArb4t7LH9KlWiyFx9xkpw3qpzHBodnDr+8IDFQDoxeYuD8uBa\nJaTj0cFPj5oBaww3cbOME4rEpQBvecFmHE6D52ukqwIt3eh6WlHfcGcZ8Xa9\nbn4+aRAbBMnqKsau7RZKjE/EJbufve28GfMXgRUXakowFrM0xZuoPqEHW/2v\nga8jqBe1Mz3Nw9GyjffxyjPuszo/78eR8r55DXUxhHrBqkidQcyuv0aRlqa9\nFYP5\r\n=hWFy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6dEL6mZPVayrf9+ktBaKPOwBNTAlohwxRkit4djlyVAiBShndHuwd76s1EJjIGLX0jM1vyhkhqeFI7hA2lhM1xdA=="}]},"maintainers":[{"name":"b1zzu","email":"david3bizzarri@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/notistack_0.5.0_1550841795566_0.24140339594314475"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-22T13:22:43.390Z","0.4.2":"2019-02-22T13:22:43.810Z","modified":"2022-04-04T17:24:01.865Z","0.5.0":"2019-02-22T13:23:15.709Z"},"maintainers":[{"name":"b1zzu","email":"david3bizzarri@gmail.com"}],"description":"Highly customisable notification snackbars (Highly customizable notification snackbars (toasts) that can be stacked on top of each other) that can be stacked on top of each other","homepage":"https://www.iamhosseindhv.com/notistack","keywords":["notistack","enqueueSnackbar","snackbarprovider","react","javascript","material-ui","material ui","toast","redux","snackbar","stacked","notification","material design"],"repository":{"url":"git+https://github.com/iamhosseindhv/notistack.git","type":"git"},"contributors":[{"name":"Hossein Dehnokhalaji","url":"https://www.iamhosseindhv.com/"}],"author":{"name":"Hossein Dehnokhalaji","email":"hossein.dehnavi98@yahoo.com","url":"https://github.com/iamhosseindhv/notistack"},"bugs":{"url":"https://github.com/iamhosseindhv/notistack/issues"},"license":"MIT","readme":"# notistack\n\n\n\n\n\n**Notistack** is an extention to Material-UI [Snackbar](https://material-ui.com/demos/snackbars). notistack makes it extremely easy to display snackbars (so you don't have to deal with open/close state of them), and also enables **you** to stack snackbars on top of one another. It's **highly customizable** and you can customize snackbars the same way you do for Mui-Snackbars.\n\n \n#### [`Play with online demo here`](https://iamhosseindhv.com/notistack)\n \n| Stacking behaviour | Dismiss oldest when reached maxSnack (3 here)| \n| --- | --- |\n| | |\n\n\nTable of Contents\n--\n- [How to use](#how-to-use)\n- [Online demo](#online-demo)\n- [Documentation](#documentation)\n - [`SnackbarProvider`](#snackbarprovider)\n - [`withSnackbar`](#withsnackbar)\n - [Add actions to snackbar](#add-actions-to-snackbar)\n - [Redux example](#redux-example)\n- [Contribution](#contribution)\n- [Notes](#notes)\n- [Author - Contact me](#author---contact)\n\n\n## Getting Started\nUse your prefered package manager:\n```\nnpm install notistack\nyarn add notistack \n```\n\n## How to use\n\n**1:** Wrap your app inside a `SnackbarProvider` component: (see [docs](#documentation) for a full list of available props)\n```javascript\nimport { SnackbarProvider } from 'notistack';\n\n\n \n\n\n```\n\n\n**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.\n\n```javascript\nimport { withSnackbar } from 'notistack';\n\nclass MyComponent extends Component {\n handleNetworkRequest = () => {\n fetchSomeData()\n .then(() => this.props.enqueueSnackbar('Successfully fetched the data.'))\n .catch(() => this.props.enqueueSnackbar('Failed fetching data.'));\n };\n\n render(){\n //...\n };\n \n};\n\nexport default withSnackbar(MyComponent);\n```\n\n\n## Online demo\n**You can see the online demo and experiment all the possible configurations [`here`](https://iamhosseindhv.com/notistack).**\nOr see the code for a minimal working example: [codesandbox](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1&module=%2FApp.js) \n\n\n## Documentation\n#### [`See full docs here`](https://iamhosseindhv.com/notistack)\n\n### **SnackbarProvider**:\nAll material-ui Snackbar props will get passed down to a Snackbar component. See Material-ui [docs](https://material-ui.com/api/snackbar/) for more info.\n```javascript\n// Maximum number of snackbars that can be stacked on top of eachother.\nmaxSnack type: number required: true default: 3\n\n// The little icon that is displayed in a snackbar\niconVariant type: any required: false default: Material design icons\n\n// hide or display icon variant of a snackbar\nhideIconVariant type: boolean required: false default: false\n\n// event fired when user clicks on action button (if any)\nonClickAction type: func required: false defualt: dismisses the snackbar\n\n// Example of a Mui-Snackbar prop\ntransitionDuration={{ exit: 380, enter: 400 }}\n```\nUsing material-ui `classes` prop, you can override styles applied to a snackbar based on its variant. For more info see [overriding with classes](https://material-ui.com/customization/overrides/#overriding-with-classes). This accepts the following keys:\n```\nclasses.variantSuccess: Styles applied to the snackbar if variant is set to 'success'.\nclasses.variantError: is set to 'error'.\nclasses.variantWarning: is set to 'warning'.\nclasses.variantInfo: is set to 'info'.\n```\n\n### **withSnackbar**:\nWhen you export your component using `withSnackbar`, you'll have access to `enqueueSnackbar` and `closeSnackbar` methods in your props. \n\n#### `enqueueSnackbar`\nAdds a snackbar to the queue to be displayed to the user. It takes two arguments `message` and an object of `options` and returns a key that is used to reference that snackbar later on. (e.g. to dismiss it programmatically)\n\n```javascript\nconst key = this.props.enqueueSnackbar(message, options)\n\n// text of the snackbar\nmessage type:string required: true\n\n// object containing options with the following shape\noptions: type:object required: false \n\n// type of the snackbar\noptions.variant type:string oneOf(['default', 'error', 'success', 'warning', 'info'])\n\n// You can pass any material-ui Snackbar prop here, and they will be applied to this individual snackbar.\n// for example, this particular snackbar will get dismissed after 1 second.\noptions.autoHideDuration: 1000\n```\n**Note**: `onPresentSnackbar` has been now deprecated. Use `enqueueSnackbar` instead:\n```javascript\n// ❌ before:\nthis.props.onPresentSnackbar('variant', 'message')\n\n// ✅ after:\nthis.props.enqueueSnackbar('message', { variant: 'variant' })\n```\n\n#### `closeSnackbar`\nDismiss snackbar with the given key.\n```javascript\nthis.props.closeSnackbar(key)\n\n// id returned by enqueueSnackbar - in order to reference a snackbar\nkey type: string|number required: true\n```\n\n\n### Add actions to snackbar: \nYou can add actions to snackbars in the same manner specified in material-ui [docs](https://material-ui.com/demos/snackbars):\n```javascript\nMy Action\n ]}\n onClickAction={() => alert('Clicked on my action button.')}\n>\n \n\n```\n\nHowever, notice that by passing `action` to `SnackbarProvider`, you’ll be adding action to all of the snackbars. To specify action for a single snackbar, use `options` argument of `enqueueSnackbar` method instead: \n```javascript\nthis.props.enqueueSnackbar('Item moved to recently deleted folder.', {\n variant: 'default',\n action: ,\n onClickAction={() => alert('Clicked on my action button.')}\n})\n```\nUse `onClickAction` prop to handle onClick event on snackbar action. The default behaviour of `onClickAction` is to dismiss the snackbar. Also, note that multiple actions for a snackbar is not supported by notistack. \n\n### Redux example:\nYou can use notistack to send snackbars from reducers. This has lots of applications but particularly useful when a network request fails. For more information check out notistack's [minimal redux example](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example).\n\n## Contribution\nOpen an issue and your problem will be solved.\n\n\n### Notes\nMaterial Design guidelines [suggests](https://material.io/design/components/snackbars.html#behavior) that only one snackbar should be displayed at a time. But I liked to stack them. 😁 So I made notistack. But if you'd like to stick to the guidelines, you can set `maxSnack` to `1` and just take advantage of `enqueueSnackbar` function.\n\n\n## Author - Contact\nHossein Dehnokhalaji\n\n\n\n\n\n","readmeFilename":"README.md"}
![\"Hossein](\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/facebook.png\")
\n![\"Hossein](\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/instagram.png\")
\n![\"Hossein](\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/linkedin.png\")
\n![\"Hossein](\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/contact.png\")
\n","readmeFilename":"README.md"}![](\"https://i.imgur.com/MtijvAK.gif\"/)
| ![](\"https://i.imgur.com/urX47Wn.gif\"/)
|\n\n\nTable of Contents\n--\n- [How to use](#how-to-use)\n- [Online demo](#online-demo)\n- [Documentation](#documentation)\n - [`SnackbarProvider`](#snackbarprovider)\n - [`withSnackbar`](#withsnackbar)\n - [Add actions to snackbar](#add-actions-to-snackbar)\n - [Redux example](#redux-example)\n- [Contribution](#contribution)\n- [Notes](#notes)\n- [Author - Contact me](#author---contact)\n\n\n## Getting Started\nUse your prefered package manager:\n```\nnpm install notistack\nyarn add notistack \n```\n\n## How to use\n\n**1:** Wrap your app inside a `SnackbarProvider` component: (see [docs](#documentation) for a full list of available props)\n```javascript\nimport { SnackbarProvider } from 'notistack';\n\n