{"id":13406844,"url":"https://github.com/iamhosseindhv/notistack","last_synced_at":"2025-05-13T15:07:58.776Z","repository":{"id":37431475,"uuid":"143562995","full_name":"iamhosseindhv/notistack","owner":"iamhosseindhv","description":"Highly customizable notification snackbars (toasts) that can be stacked on top of each other","archived":false,"fork":false,"pushed_at":"2025-01-18T06:39:52.000Z","size":6134,"stargazers_count":3994,"open_issues_count":61,"forks_count":299,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-04-30T12:36:59.550Z","etag":null,"topics":["google-material","javascript","material-design","material-ui","notifications","reactjs","redux","snackbar","stack","toast","toast-notifications"],"latest_commit_sha":null,"homepage":"https://notistack.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamhosseindhv.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"notistack"}},"created_at":"2018-08-04T21:05:47.000Z","updated_at":"2025-04-24T23:54:34.000Z","dependencies_parsed_at":"2023-12-15T10:09:47.456Z","dependency_job_id":"b68091f6-3907-42ee-8ae9-7b9d34ad5359","html_url":"https://github.com/iamhosseindhv/notistack","commit_stats":{"total_commits":449,"total_committers":51,"mean_commits":8.803921568627452,"dds":"0.22717149220489974","last_synced_commit":"a61155adc85443f01dfc8818b6b6653edbd83288"},"previous_names":[],"tags_count":66,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamhosseindhv%2Fnotistack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamhosseindhv%2Fnotistack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamhosseindhv%2Fnotistack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamhosseindhv%2Fnotistack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamhosseindhv","download_url":"https://codeload.github.com/iamhosseindhv/notistack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251832068,"owners_count":21650971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-material","javascript","material-design","material-ui","notifications","reactjs","redux","snackbar","stack","toast","toast-notifications"],"created_at":"2024-07-30T19:02:40.819Z","updated_at":"2025-05-05T21:11:27.345Z","avatar_url":"https://github.com/iamhosseindhv.png","language":"TypeScript","funding_links":["https://opencollective.com/notistack"],"categories":["Notifications","TypeScript","HarmonyOS","UI Components","Components"],"sub_categories":["Windows Manager","Notification","Hooks"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://notistack.com/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/26996372/227733423-19064bf7-5176-4a0b-a1b6-cd80a7b32cdf.png\" alt=\"notistack logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n**[Notistack](https://notistack.com): Display notifications with call of a function.**\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\nEasy to use, customizable, smooth transitions, stack and queue them up!\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://notistack.com\"\u003eDocumentation\u003c/a\u003e\n\u003cspan\u003e · \u003c/span\u003e\n\u003ca href=\"https://notistack.com/features/basic\"\u003eExamples\u003c/a\u003e\n\u003c/br\u003e\n\u003c/br\u003e\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\u003c/div\u003e\n\n\nTable of Contents\n--\n- [How to use](#how-to-use)\n- [Online demo](#online-demo)\n- [Documentation](https://notistack.com/api-reference)\n\n## Getting Started\n\nUse your preferred package manager:\n```\nnpm install notistack\nyarn add notistack\n```\n\n#### Version guide\n| Version | Notes \n| --- | --- |\n| `v3.x.x` | Latest stable release. Standalone (i.e. not dependent on [material-ui](https://github.com/mui/material-ui)) |\n| \u003c= `v2.0.8` | Requires Material-UI v5 as peer dependency. `npm install notistack@2.0.8` |\n| \u003c= `1.0.10` | Requires Material-UI \u003c= v4 as peer dependency. `npm install notistack@latest-mui-v4` |\n\n\n\n### How to use\n\nInstantiate a `SnackbarProvider` component and start showing snackbars: (see [docs](https://notistack.com/api-reference) for a full list of available props)\n\n```jsx\nimport { SnackbarProvider, enqueueSnackbar } from 'notistack';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cSnackbarProvider /\u003e\n      \u003cbutton onClick={() =\u003e enqueueSnackbar('That was easy!')}\u003eShow snackbar\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\nAlternatively, You can use `useSnackbar` hook to display Snackbars. Just remember to wrap your app inside of a `SnackbarProvider` to have access to the hook context:\n\n```jsx\nimport { SnackbarProvider, useSnackbar } from 'notistack';\n\n// wrap your app\n\u003cSnackbarProvider\u003e\n  \u003cApp /\u003e\n  \u003cMyButton /\u003e\n\u003c/SnackbarProvider\u003e\n\nconst MyButton = () =\u003e {\n  const { enqueueSnackbar, closeSnackbar } = useSnackbar();\n  return \u003cButton onClick={() =\u003e enqueueSnackbar('I love hooks')}\u003eShow snackbar\u003c/Button\u003e;\n};\n```\n\n### Online demo\n\n**Visit the [`documentation website`](https://notistack.com/features/basic) to see all the examples.**\u003c/br\u003e\nOr play with a minimal working example: [codesandbox](https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/simple-example??hidenavigation=1\u0026module=%2FApp.js) \u003c/br\u003e\n\n### Contribution\n\nOpen an issue and your problem will be solved.\n\n### Author - Contact\n\nHossein Dehnokhalaji\n\n\u003ca href=\"https://www.instagram.com/iamhosseindhv\"\u003e\u003cimg src=\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/instagram.png\" alt=\"Hossein Dehnokhalaji Instagram profile\" align=\"right\" width=\"32\" height=\"32\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/iamhosseindhv\"\u003e\u003cimg src=\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/linkedin.png\" alt=\"Hossein Dehnokhalaji Linkedin profile\" align=\"right\" width=\"32\" height=\"32\"/\u003e\u003c/a\u003e\n\u003ca href=\"mailto:hossein.dehnavi98@yahoo.com\"\u003e\u003cimg src=\"https://github.com/iamhosseindhv/Rentaly/blob/master/Gifs/contact.png\" alt=\"Hossein Dehnokhalaji email address\" align=\"right\" width=\"32\" height=\"32\"/\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamhosseindhv%2Fnotistack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamhosseindhv%2Fnotistack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamhosseindhv%2Fnotistack/lists"}