{"_id":"@dragondra9/smartr-notistack","_rev":"1-9b83dd09db168870943c6e1712e1da08","name":"@dragondra9/smartr-notistack","dist-tags":{"latest":"1.0.6-next.2"},"versions":{"1.0.6-next.2":{"name":"@dragondra9/smartr-notistack","version":"1.0.6-next.2","description":"Highly customizable notification snackbars (toasts) that can be stacked on top of each other","main":"dist/index.js","module":"dist/notistack.esm.js","types":"dist/index.d.ts","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":{"build":"tsdx build --transpileOnly --entry ./src/index.js","prebuild":"npm run docs","prepublishOnly":"npm run build","docs":"rimraf typedoc.json && typedoc --tsconfig","lint":"eslint . --ext .js,.jsx,.ts,.tsx"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","@material-ui/core":"^5.0.0-alpha.15"},"devDependencies":{"@babel/preset-react":"^7.8.3","@material-ui/core":"^5.0.0-alpha.15","@types/node":"^13.9.0","@types/react":"^16.9.23","@types/react-dom":"^16.9.5","@types/react-is":"^16.7.1","@typescript-eslint/eslint-plugin":"^3.9.1","@typescript-eslint/parser":"^3.9.1","babel-plugin-optimize-clsx":"^2.6.1","eslint":"^7.7.0","eslint-config-airbnb":"~18.2.0","eslint-plugin-import":"~2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.6","react":"^16.8.0 || ^17.0.0","react-dom":"^16.8.0 || ^17.0.0","rimraf":"^3.0.2","rollup-plugin-bundle-size":"^1.0.3","rollup-plugin-copy":"^3.3.0","tsdx":"^0.13.2","typedoc":"^0.16.11","typescript":"^3.8.3"},"dependencies":{"clsx":"^1.1.0","hoist-non-react-statics":"^3.3.0"},"bugs":{"url":"https://github.com/iamhosseindhv/notistack/issues"},"funding":{"type":"opencollective","url":"https://opencollective.com/notistack"},"contributors":[{"name":"Hossein Dehnokhalaji","url":"https://www.iamhosseindhv.com/"}],"keywords":["notistack","enqueueSnackbar","snackbarprovider","useSnackbar","multiple","react","javascript","material-ui","toast","redux","snackbar","stacked","notification","material design","hossein","dehnokhalaji","iamhosseindhv"],"gitHead":"d01426db4ce2a4e7bd6c07d1e9c40395b6f966a0","_id":"@dragondra9/smartr-notistack@1.0.6-next.2","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-OLJq4sSN0UGwwFeaGCIYQZqQ/9JDnap5f/R6HFZ4WtKoakITQJhD1MDSqFTBWFVfZg0Ug62URI4z1Wa27WAT5Q==","shasum":"d43ab3d9cc0da2429be7dbcd714963c25f723624","tarball":"https://registry.npmjs.org/@dragondra9/smartr-notistack/-/smartr-notistack-1.0.6-next.2.tgz","fileCount":13,"unpackedSize":319254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+IQFCRA9TVsSAnZWagAAm80P/jbT8rP9ANqdF854Da81\nnNsi6rkpvCr4ayXj7PwLL8boU9StKaVZkOZA6XUXs3XBj0W8OKQXd/yASxNC\nSSo85/ZwPEW9G9f0BB3Xvv5Uv5cvBR5aCToYgsuuKf4/bcz8emt+LfweY0YN\nu6TFh5VkUqAa908soVwBvwWbe9LlwD4/Q8qZrm2TiPuaXdGaO++V6IsouE+z\neLVMMZqwUA+xgKi8cUtlF1y+H5IhpxKhtxf3xlR9OSWb6OIdvrZ27plPOsYY\nVv3V6zDbPcozTdTvq8GpZG9WC87RNjUATMbHgAzDL19pEWdWCYAR1pytHg8q\nXVji4cyWELHqR8vzDSo4X1g0Yjp4+/KHASEr5A77paKX5i5OT6kDDhB/Zgc6\nCQSIpxKmEcqA/XZwP1DexmnPlB7XG6sgkarnPeRzYn4g7ivC35yFmsTwj+Z5\nGp/1e2sLmayuzSVcXBAGn0D1C/lRWtVIWMFYzsk50U6hde5CKhqeyoJ5Ddtq\n4n7werVTBJiSsJ/GyFrFOsFH+L2QwYWss6kTJil9g+7Q18yI2/r+YchOp3JU\nSpOgFkYd3shm+9smZFPHmn2q2zuuubhJicC4zCMja9w+1NIIu/cMSOnECLfH\nXzzhkKc31g3ZqKubl82WutAmOOWFbfZIxFzMN9aKcJiAwBHeq1vp0/+PKNiV\nMZZw\r\n=d3cN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEq01V3ZG36oHzCE5XZNvbBKzmCptwKAy7zoTaYjqFJHAiBNi8lm7ghTlilkejGTi0yvDbItvW8+8pZxAKWc6HUgLg=="}]},"_npmUser":{"name":"dragondra9","email":"duythien0912@gmail.com"},"directories":{},"maintainers":[{"name":"dragondra9","email":"duythien0912@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/smartr-notistack_1.0.6-next.2_1626899460920_0.3996875873968935"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-21T20:31:00.830Z","1.0.6-next.2":"2021-07-21T20:31:01.098Z","modified":"2022-04-05T05:36:20.167Z"},"maintainers":[{"name":"dragondra9","email":"duythien0912@gmail.com"}],"description":"Highly customizable notification snackbars (toasts) that can be stacked on top of each other","homepage":"https://www.iamhosseindhv.com/notistack","keywords":["notistack","enqueueSnackbar","snackbarprovider","useSnackbar","multiple","react","javascript","material-ui","toast","redux","snackbar","stacked","notification","material design","hossein","dehnokhalaji","iamhosseindhv"],"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":"

\n \"notistack

\n

\n\n
\n\n[**Notistack**](https://iamhosseindhv.com/notistack) is a notification library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack snackbars/toasts on top of one another.\n
\n**Visit [documentation website](https://iamhosseindhv.com/notistack/demos) for demos**.\n\n[![npm version](https://img.shields.io/npm/v/notistack.svg?label=version)](https://www.npmjs.com/package/notistack)\n[![npm downloads](https://img.shields.io/npm/dm/notistack.svg)](https://www.npmjs.com/package/notistack)\n[![package license](https://img.shields.io/npm/l/notistack.svg)](https://www.npmjs.com/package/notistack)\n\n\n
\n\n\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](https://iamhosseindhv.com/notistack/api)\n- [Redux / Mobx support](#redux-and-mobx-support)\n\n\n## Getting Started\nUse your preferred 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](https://iamhosseindhv.com/notistack/api) for a full list of available props)\n
\n**Note:** If you're using material-ui `ThemeProvider`, make sure `SnackbarProvider` is a child of it.\n```jsx\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**2 (alternative):** You can use `useSnackbar` hook in your functional components as well.\n\n```javascript\nimport { useSnackbar } from 'notistack';\n\nconst MyButton = () => {\n const { enqueueSnackbar, closeSnackbar } = useSnackbar();\n\n const handleClick = () => {\n enqueueSnackbar('I love hooks');\n };\n\n return (\n \n );\n}\n```\n\n### Online demo\n**Visit [`documentation website`](https://iamhosseindhv.com/notistack/demos) to see all the demos.**
\nOr play with 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### Redux and Mobx support:\nnotistack is compatible with state management libraries such as Redux and Mobx. See notistack [documentation](https://iamhosseindhv.com/notistack/demos#redux-/-mobx-example) for more info.\n\n### Contribution\nOpen an issue and your problem will be solved.\n\n\n### Author - Contact\nHossein Dehnokhalaji\n\n\"Hossein\n\"Hossein\n\"Hossein\n","readmeFilename":"README.md"}